/* PICK play surfaces. Presentation only: state, gestures and image readiness stay owned by the app. */
.screen{--play-accent:#c3a1ff;--play-rgb:155,108,255;--play-ink:#f2eaff}
.screen[data-play-mode="waifu"],.waifu-pick-screen{--play-accent:#f5a0c7;--play-rgb:222,112,166;--play-ink:#ffeaf4}
.screen[data-play-mode="best"],.best-pick-screen,#bestTopResultScreen,#bestTournamentResultScreen,#bestQuickResultScreen{--play-accent:#edc47c;--play-rgb:197,149,67;--play-ink:#fff2d8}
.screen[data-play-mode="strongest"],#strongestDuelScreen,#strongestDuelResultScreen,#strongestTopResultScreen,#strongestTournamentResultScreen,#strongestRankingScreen,#strongestTournamentSetupScreen{--play-accent:#ffad91;--play-rgb:231,123,88;--play-ink:#fff0e9}

/* A stable round header keeps progress readable without stealing the stage. */
:is(.screen-swipe,.screen-battle,.screen-pairwise,.screen-top-select) .round-head{align-items:center;flex-wrap:nowrap;gap:.75rem;margin:.8rem 0 .65rem}
:is(.screen-swipe,.screen-battle,.screen-pairwise,.screen-top-select) .round-head>div:first-child{min-width:0}
:is(.screen-swipe,.screen-battle,.screen-pairwise,.screen-top-select) .round-head h2{font-size:clamp(1.3rem,6.1vw,1.85rem);line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
:is(.screen-swipe,.screen-battle,.screen-pairwise,.screen-top-select) .round-head .eyebrow{font-size:.6875rem;letter-spacing:.07em;margin-bottom:.35rem;color:var(--play-accent)}
.progress-copy,.vote-counter,.selection-counter{flex-shrink:0;padding:.45rem .6rem;border:1px solid rgba(var(--play-rgb),.24);border-radius:.75rem;background:rgba(var(--play-rgb),.07);font-variant-numeric:tabular-nums}
.progress-copy{font-size:.875rem;font-weight:750}.progress-copy i{margin-inline:.18rem}
.vote-counter{text-align:center}.vote-counter strong{font-size:1.1rem;line-height:1.2}.vote-counter small{font-size:.625rem;line-height:1.4;letter-spacing:0;text-transform:none;color:#c3b8ce}
.selection-counter{font-size:.6875rem;line-height:1.35}.selection-counter strong{font-size:1rem;margin-left:.15rem}
.screen-swipe .progress-track{height:3px;flex-shrink:0;background:#2d2437}.screen-swipe .progress-track span{background:var(--play-accent)}
:is(.screen-battle,.screen-pairwise)>.screen-note{margin:.15rem 0 .8rem;font-size:.8125rem;line-height:1.5;color:#c3b8ce}

/* Fit the playable card and actions to Telegram's stable viewport, even on a short phone. */
.screen-swipe .deck{flex:0 0 auto;min-height:0;height:clamp(15rem,calc(var(--app-viewport-height,100dvh) - 17rem - var(--app-safe-top,0px) - var(--app-safe-bottom,0px)),32rem);padding-top:0;margin-top:.75rem}
.screen-swipe .character-card{height:100%;max-width:none;border-radius:1rem;border-color:rgba(var(--play-rgb),.25);box-shadow:0 .6rem 1.5rem #0003}
.screen-swipe .card-meta{left:1rem;right:1rem;bottom:1rem}.screen-swipe .card-meta h2{font-size:clamp(1.65rem,7.4vw,2.6rem);line-height:1.06;letter-spacing:-.035em;overflow-wrap:anywhere;text-wrap:balance}
.screen-swipe .card-meta>span{font-size:.6875rem;letter-spacing:.08em;color:var(--play-accent)}
.screen-swipe .card-shade{background:linear-gradient(0deg,#09070ef2,rgba(9,7,14,.2) 42%,transparent 65%)}
.screen-swipe .swipe-actions{gap:1rem;padding-top:.8rem;flex-shrink:0}
.screen-swipe .action-button{flex:1;width:auto;min-width:7rem;max-width:10rem;height:3.4rem;padding:.55rem;gap:.45rem;border-radius:1.1rem;background:#1c1525;border-color:#49394f;box-shadow:none}
.screen-swipe .action-button.like{color:var(--play-accent);background:rgba(var(--play-rgb),.14);border-color:rgba(var(--play-rgb),.45)}
.screen-swipe .action-button.pass{color:#d9bfd0}.screen-swipe .action-button span{font-size:1.35rem}.screen-swipe .action-button small{font-size:.75rem;line-height:1.3;font-weight:650;letter-spacing:0;text-transform:none;color:inherit}
.screen-swipe .gesture-hint{font-size:.6875rem;margin-top:.55rem;color:#b8aec5}
.screen-swipe .card-tags span{font-size:.625rem;letter-spacing:0;padding:.25rem .4rem}
.screen-swipe .card-image-status strong,.swipe-deck-status strong{font-size:.8125rem;line-height:1.4;letter-spacing:0}

/* Opponents share one stage; their metadata stays legible and never moves the image. */
:is(.screen-battle,.screen-pairwise) .versus-grid{flex:0 0 auto;min-height:0;height:clamp(19rem,calc(var(--app-viewport-height,100dvh) - 16rem - var(--app-safe-top,0px) - var(--app-safe-bottom,0px)),34rem);gap:.65rem}
:is(.screen-battle,.screen-pairwise) .versus-card{border-radius:1rem;border-color:rgba(var(--play-rgb),.25)}
:is(.screen-battle,.screen-pairwise) .versus-card>img,:is(.screen-battle,.screen-pairwise) .best-versus-art{height:100%;min-height:0}
.versus-grid::after{width:2.45rem;height:2.45rem;background:#24192e;color:var(--play-accent);border:3px solid #100c16;transform:translate(-50%,-50%);font-size:.6875rem;letter-spacing:.02em}
:is(.screen-battle,.screen-pairwise) .versus-meta{padding:5rem .7rem .9rem;background:linear-gradient(0deg,#09070efc,rgba(9,7,14,.75) 55%,transparent)}
:is(.screen-battle,.screen-pairwise) .versus-meta strong{font-size:clamp(.875rem,3.8vw,1.15rem);line-height:1.22;letter-spacing:-.02em;overflow-wrap:anywhere}
:is(.screen-battle,.screen-pairwise) .versus-meta>small{font-size:.6875rem;line-height:1.35;color:var(--play-accent)}
:is(.screen-battle,.screen-pairwise) .strongest-form{font-size:.6875rem!important;line-height:1.35}
:is(.screen-battle,.screen-pairwise) .combat-tag{font-size:.6875rem;line-height:1.3;letter-spacing:0;padding:.2rem .3rem;border-color:#67505a;background:#241a23;color:#efd7cf}
.screen-strongest-duel .strongest-skip{min-height:2.8rem;margin-top:.8rem;border-radius:.75rem;font-size:.8125rem;background:#18131f}
.screen-battle .bye-note{font-size:.75rem;line-height:1.45;margin:0 0 .75rem;background:#21182c}

/* TOP-5: catalogue, ordered shortlist, then a result worth sharing. */
.screen-top-select,.screen-top-sort{padding-top:.7rem}
.screen-top-select>.screen-note{font-size:.8125rem;line-height:1.5;margin:.1rem 0 1rem;max-width:34ch;color:#b8aec5}
.top-select-grid{gap:.7rem;padding-bottom:1.5rem}
.top-select-card{border-radius:.85rem;border:1px solid #382c43;background:#15101c;box-shadow:none}
.top-select-card.selected{border-color:var(--play-accent);box-shadow:inset 0 0 0 1px var(--play-accent);background:rgba(var(--play-rgb),.13)}
.top-select-copy{padding:.7rem .65rem}.top-select-copy strong{font-size:.8125rem;line-height:1.35;min-height:2.7em;letter-spacing:-.015em}.top-select-copy small{font-size:.6875rem;line-height:1.4;color:#b8aec5}
.selection-order{top:.5rem;right:.5rem;width:1.75rem;height:1.75rem;background:var(--play-accent);color:#160d22;font-size:.8125rem;font-weight:800;box-shadow:0 2px 7px #0007}
.screen-top-select .sticky-action{padding-top:.8rem;background:linear-gradient(transparent,#0c0912 30%)}
.screen-top-select .sticky-action .primary-button{min-height:3rem;border-radius:.8rem}
.screen-top-sort .result-heading h2{font-size:clamp(1.7rem,7vw,2.35rem);letter-spacing:-.035em;line-height:1.12}
.screen-top-sort .result-heading>p:last-child{font-size:.8125rem;color:#b8aec5;line-height:1.5;margin:.6rem 0 0}
.screen-top-sort .top-sort-list{gap:.55rem;margin:1rem 0 1.2rem}
.top-sort-item{padding:.4rem;border-radius:.85rem;background:#17111e;border-color:#382c43}
.top-sort-item:first-child{border-color:rgba(var(--play-rgb),.5);background:rgba(var(--play-rgb),.09)}
.screen-top-sort .top-sort-item:first-child{transform:none;box-shadow:none}.screen-top-sort .top-sort-item:first-child::after{content:none}
.sort-handle{color:#a99ab9;border-radius:.55rem}.sort-copy strong{white-space:normal;overflow-wrap:anywhere;line-height:1.35;letter-spacing:-.015em}.sort-copy small{font-size:.6875rem;line-height:1.4;white-space:normal}
.sort-copy .top-rank{font-size:.875rem;color:var(--play-accent)}
.sort-controls button{background:#241a30;border-color:#493754;border-radius:.65rem;color:#e8d6fa}.sort-controls button:disabled{opacity:.3}
.screen-top-sort>#confirmTop5Button{margin-top:auto;min-height:3.1rem;border-radius:.85rem}

.screen-result,.screen-stats,.screen-share{padding-top:1rem}
:is(.screen-result,.screen-stats) .result-heading h1,.screen-share .share-heading h1{font-size:clamp(1.9rem,8.4vw,2.9rem);line-height:1.08;letter-spacing:-.035em}
:is(.screen-result,.screen-stats) .result-heading h1 em,.screen-share .share-heading h1 em{color:var(--play-accent)}
:is(.screen-result,.screen-stats) .result-heading>p:last-child{font-size:.8125rem;line-height:1.5;color:#b8aec5;margin:.7rem 0 0}
.screen-result .result-heading>.eyebrow,.screen-share .share-heading>.eyebrow{color:var(--play-accent);font-size:.6875rem;letter-spacing:.07em;margin-bottom:.4rem}
.screen-result .result-actions,.screen-share .result-actions{gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #34273f}
:is(.screen-result,.screen-share) .result-actions .secondary-button{margin-top:0}
:is(.screen-result,.screen-share) .result-actions :is(.primary-button,.secondary-button){min-height:3rem;border-radius:.8rem;font-size:.875rem}
:is(.screen-result,.screen-share) .result-actions .text-button{min-height:2.75rem;font-size:.8125rem;color:#c1b3cf}
.top-list{margin:1.1rem 0 .2rem;gap:.45rem}
.top-list .top-item{grid-template-columns:1.7rem 3.5rem minmax(0,1fr);gap:.7rem;padding:.55rem .65rem;border:0;border-bottom:1px solid #30253b;border-radius:.5rem;background:transparent}
.top-list .top-item:first-child{grid-template-columns:2rem 4.5rem minmax(0,1fr);padding:.8rem .65rem;margin-bottom:.3rem;border:1px solid rgba(var(--play-rgb),.4);border-radius:1rem;background:linear-gradient(115deg,rgba(var(--play-rgb),.19),#17111f)}
.top-list .top-thumb,.top-list .best-top-art{width:3.5rem;height:4.25rem;border-radius:.6rem}.top-list .top-item:first-child .top-thumb,.top-list .top-item:first-child .best-top-art{width:4.5rem;height:5.6rem}
.top-list .top-rank{font-size:.875rem;font-weight:700;color:#aa98bd}.top-list .top-item:first-child .top-rank{font-size:1.35rem;color:var(--play-accent)}
.top-list .top-copy strong{white-space:normal;overflow-wrap:anywhere;font-size:.9375rem;line-height:1.35;letter-spacing:-.02em}.top-list .top-item:first-child .top-copy strong{font-size:1.1rem}
.top-list .top-copy small{display:block;line-height:1.4;font-size:.6875rem;margin-top:.2rem;color:#b8aec5}
.portrait-grid{gap:.6rem;margin:1rem 0}.portrait-tile{border-radius:.8rem}.portrait-tile>span{font-size:.75rem;line-height:1.35;padding:2.2rem .55rem .6rem;text-wrap:balance}

/* Champion art is the result focal point, with the path and next action within reach. */
.screen-result .winner-card{flex:0 0 auto;height:clamp(22rem,57dvh,32rem);min-height:0;margin:1rem 0 .85rem;border-radius:1rem;border-color:rgba(var(--play-rgb),.4)}
.screen-result .winner-card>img,.screen-result .best-winner-placeholder{height:100%;min-height:0}
.screen-result .winner-copy{padding:6rem 1rem 1.1rem;background:linear-gradient(0deg,#0b0713fa,rgba(11,7,19,.65) 50%,transparent)}
.screen-result .winner-copy h2{font-size:clamp(1.9rem,8vw,2.8rem);letter-spacing:-.035em;line-height:1.08;overflow-wrap:anywhere}.screen-result .winner-copy span{color:var(--play-accent);font-size:.6875rem;letter-spacing:.08em}
.screen-result .winner-copy p{font-size:.8125rem;line-height:1.4;color:#dbc9dc}
.tournament-path{padding:1rem;border-radius:.9rem;border-color:#3c2d48;background:#15101d;margin:.2rem 0}
.tournament-path-head{gap:.7rem;align-items:center;margin-bottom:.7rem}.tournament-path-head small{font-size:.625rem;letter-spacing:.07em}.tournament-path-head h3{font-size:1rem;margin-top:.3rem}.tournament-path-head>span{font-size:.6875rem;line-height:1.4;color:var(--play-accent)}
.tournament-path ol{gap:0}.tournament-path li{grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.55rem;padding:.55rem 0;border-radius:0;border-top:1px solid #31263b;background:none}.tournament-path img{width:2.4rem;height:3rem;border-radius:.45rem}
.tournament-path li small{font-size:.625rem;color:#b8aec5}.tournament-path li strong{font-size:.8125rem;line-height:1.3;white-space:normal;overflow-wrap:anywhere}.tournament-path li>b{font-size:.625rem;color:var(--play-accent)}
.screen-result .winner-stat{font-size:.8125rem;line-height:1.45;color:var(--play-accent);margin:.1rem 0 .8rem}
.duel-leader{grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;padding:.75rem;background:linear-gradient(115deg,#352028,#17101d);border-color:#674335;border-radius:1rem}
.duel-leader img{width:6.5rem;height:8rem;border-radius:.7rem}.duel-leader strong{font-size:1.3rem;line-height:1.2;letter-spacing:-.025em}.duel-leader p{font-size:.75rem;line-height:1.45}.duel-leader span{display:block;font-size:1rem;font-weight:750;color:#ffba9c}
.duel-session-gain{padding:.65rem .8rem;background:#2b1b22;border-radius:.65rem;color:#ffc0aa;font-size:.8125rem}
.screen-result .power-style-card{border-color:#48303a;background:#1b131e;border-radius:.9rem}.screen-result .power-style-card p{font-size:.8125rem;line-height:1.5}.screen-result .power-style-tags span{font-size:.6875rem;letter-spacing:0}

.screen-stats .stats-list{gap:0;margin:1rem 0}.screen-stats .stats-item{grid-template-columns:1.7rem 3rem minmax(0,1fr) auto;gap:.6rem;padding:.75rem .25rem;background:none;border:0;border-bottom:1px solid #34273f;border-radius:0}
.screen-stats .stats-thumb{width:3rem;height:4rem;border-radius:.5rem}.screen-stats .stats-copy strong{font-size:.875rem;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.screen-stats .stats-copy small{display:block;font-size:.6875rem;line-height:1.4;margin-top:.18rem;color:#b8aec5}
.screen-stats .stats-item>.top-rank+.stats-copy{grid-column:2/-1}
.screen-stats .strongest-rating-value{font-size:1rem;font-weight:750;color:var(--play-accent)}.screen-stats .strongest-rating-value small{font-size:.625rem;letter-spacing:.05em}.screen-stats .top-rank{font-size:.875rem;color:#bca5d0}
.screen-stats .stats-item:first-child .top-rank{color:var(--play-accent);font-size:1.1rem}
#typeResultScreen .type-orb{width:2.6rem;height:2.6rem;border-radius:.8rem;box-shadow:none;margin-bottom:.7rem}
#typeResultScreen .tag-chips{margin:.8rem 0;gap:.35rem}#typeResultScreen .tag-chips span{font-size:.75rem;padding:.4rem .65rem;background:#261a34;border-color:#5c3c70}
#typeResultScreen .section-label{font-size:.75rem;letter-spacing:.04em;color:#c6b4d6;margin:1.3rem 0 .7rem}
.trait-result{border:0;border-bottom:1px solid #34273f;background:none;border-radius:0;padding:.7rem 0}.trait-result span{font-size:.875rem}.trait-result strong{font-size:.875rem;color:var(--play-accent)}
.match-card strong{white-space:normal;font-size:.8125rem;line-height:1.35;overflow-wrap:anywhere}.match-card img{border-radius:.7rem}.match-row{gap:.6rem}

/* Display size changes only; the exported PNG stays full resolution. Keep image-save mode untouched. */
.screen-share:not(.image-save-mode) .share-preview{width:min(100%,17rem,calc((var(--app-viewport-height,100dvh) - 19rem)*.5625));min-width:9rem;margin:1rem auto .3rem;padding:.4rem;border-radius:.85rem;background:#17101f;border-color:#493457;box-shadow:0 .75rem 1.5rem #0004}
.screen-share:not(.image-save-mode) .share-heading h1{font-size:clamp(1.7rem,7vw,2.3rem)}
.screen-share:not(.image-save-mode) .share-heading h1 br{display:none}.screen-share:not(.image-save-mode) .share-heading h1 em::before{content:' '}
.screen-share .share-save-hint{font-size:.75rem;line-height:1.5;max-width:34ch;color:#c6b6d4}
.screen-share .result-actions{margin-top:.75rem;padding-top:.75rem;gap:.5rem}
.screen-share:not(.image-save-mode) .result-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.screen-share:not(.image-save-mode) .result-actions>.text-button{grid-column:1/-1}
.screen-share .result-actions #shareLinkButton{color:#aa9ab9;font-size:.75rem}

@media(max-width:23rem){
  .selection-counter{padding:.4rem;font-size:.625rem}.selection-counter strong{font-size:.875rem}
  :is(.screen-battle,.screen-pairwise) .versus-grid{gap:.5rem}
  :is(.screen-battle,.screen-pairwise) .versus-meta{padding-inline:.55rem}
  :is(.screen-battle,.screen-pairwise) .combat-tag{padding:.18rem .25rem}
  .top-list .top-item{gap:.5rem;padding-inline:.3rem}.top-list .top-item:first-child{grid-template-columns:1.6rem 4rem minmax(0,1fr);padding:.65rem .4rem}
  .top-list .top-item:first-child .top-thumb,.top-list .top-item:first-child .best-top-art{width:4rem;height:5.1rem}
  .screen-stats .stats-item{gap:.4rem;grid-template-columns:1.35rem 2.75rem minmax(0,1fr) auto}.screen-stats .stats-thumb{width:2.75rem;height:3.6rem}
  .screen-stats .strongest-rating-value{font-size:.875rem}.duel-leader{grid-template-columns:5rem minmax(0,1fr);gap:.75rem}.duel-leader img{width:5rem;height:6.5rem}
  .tournament-path{padding:.8rem}.tournament-path li{grid-template-columns:2.1rem minmax(0,1fr) auto}.tournament-path img{width:2.1rem;height:2.7rem}
}
@media(min-width:52rem){
  .screen-swipe .deck{height:clamp(18rem,calc(var(--app-viewport-height,100dvh) - 21rem),31rem)}
  :is(.screen-battle,.screen-pairwise) .versus-grid{height:clamp(21rem,calc(var(--app-viewport-height,100dvh) - 21rem),33rem)}
  .screen-result .winner-card{height:31rem}
  .screen-share:not(.image-save-mode) .share-preview{width:min(17rem,calc((var(--app-viewport-height,100dvh) - 24rem)*.5625))}
}