/* Card sleeves — per-player backs + square peek on face-up cards. */

:root{
  --card-back-default:url('../../lltcg-back.png');
  --sleeve-peek:5%;
  --sleeve-peek-opacity:.42;
  --sleeve-square-radius:1px;
  --my-sleeve-image:var(--card-back-default);
  --opp-sleeve-image:var(--card-back-default);
}

/* Do not redefine --*-sleeve-image on #screen-game — that shadows :root / inline
   inheritance and can leave deck stacks on the default back. */

/* ── Face-down: sleeve art replaces the official back ──
   Use full `background` + !important so shorthand `background:url(lltcg-back…)`
   rules in shell-all cannot win on deck stacks / flip backs.
   Hand strips sit outside .my-mat / .opp-mat — match them without that ancestor. */
html.has-my-sleeve #screen-game .my-mat .card-back-fill,
html.has-my-sleeve #screen-game .my-mat .back.live-back,
html.has-my-sleeve #screen-game .my-mat .live-flip-back,
html.has-my-sleeve #screen-game .my-mat .deck-pile:not(.wr-pile) .deck-stack,
html.has-my-sleeve #screen-game .my-mat .deck-pile:not(.wr-pile) .deck-stack.thick::before,
html.has-my-sleeve #screen-game .my-mat .deck-pile:not(.wr-pile) .deck-stack.thick::after,
html.has-my-sleeve #screen-game .my-hand-strip .hand-flip-back,
html.has-my-sleeve #screen-game .my-hand-strip .hand-flip-back .card-back-fill,
html.has-my-sleeve #screen-game .my-hand-strip .back.live-back,
html.has-my-sleeve #perf-col-mine .perf-deck-pile,
html.has-my-sleeve #perf-col-mine .perf-card .back,
html.has-my-sleeve #perf-col-mine .perf-card .back.live-back,
html.has-my-sleeve #card-flight-layer .card-flight.flight-seat-my .card-back-fill,
html.has-my-sleeve #card-flight-layer .card-flight.flight-seat-my .back.live-back,
#screen-game.has-my-sleeve .my-mat .card-back-fill,
#screen-game.has-my-sleeve .my-mat .back.live-back,
#screen-game.has-my-sleeve .my-mat .live-flip-back,
#screen-game.has-my-sleeve .my-mat .deck-pile:not(.wr-pile) .deck-stack,
#screen-game.has-my-sleeve .my-mat .deck-pile:not(.wr-pile) .deck-stack.thick::before,
#screen-game.has-my-sleeve .my-mat .deck-pile:not(.wr-pile) .deck-stack.thick::after,
#screen-game.has-my-sleeve .my-hand-strip .hand-flip-back,
#screen-game.has-my-sleeve .my-hand-strip .hand-flip-back .card-back-fill,
#screen-game.has-my-sleeve .my-hand-strip .back.live-back{
  background:var(--my-sleeve-image) center/cover no-repeat !important;
}

html.has-opp-sleeve #screen-game .opp-mat .card-back-fill,
html.has-opp-sleeve #screen-game .opp-mat .back.live-back,
html.has-opp-sleeve #screen-game .opp-mat .live-flip-back,
html.has-opp-sleeve #screen-game .opp-mat .deck-pile:not(.wr-pile) .deck-stack,
html.has-opp-sleeve #screen-game .opp-mat .deck-pile:not(.wr-pile) .deck-stack.thick::before,
html.has-opp-sleeve #screen-game .opp-mat .deck-pile:not(.wr-pile) .deck-stack.thick::after,
html.has-opp-sleeve #screen-game .opp-hand-strip .opp-hand-card,
html.has-opp-sleeve #screen-game .opp-hand-strip .card-back-fill,
html.has-opp-sleeve #screen-game .opp-hand-strip .back.live-back,
html.has-opp-sleeve #perf-col-opp .perf-deck-pile,
html.has-opp-sleeve #perf-col-opp .perf-card .back,
html.has-opp-sleeve #perf-col-opp .perf-card .back.live-back,
html.has-opp-sleeve #card-flight-layer .card-flight.flight-seat-opp .card-back-fill,
html.has-opp-sleeve #card-flight-layer .card-flight.flight-seat-opp .back.live-back,
#screen-game.has-opp-sleeve .opp-mat .card-back-fill,
#screen-game.has-opp-sleeve .opp-mat .back.live-back,
#screen-game.has-opp-sleeve .opp-mat .live-flip-back,
#screen-game.has-opp-sleeve .opp-mat .deck-pile:not(.wr-pile) .deck-stack,
#screen-game.has-opp-sleeve .opp-mat .deck-pile:not(.wr-pile) .deck-stack.thick::before,
#screen-game.has-opp-sleeve .opp-mat .deck-pile:not(.wr-pile) .deck-stack.thick::after,
#screen-game.has-opp-sleeve .opp-hand-strip .opp-hand-card,
#screen-game.has-opp-sleeve .opp-hand-strip .card-back-fill,
#screen-game.has-opp-sleeve .opp-hand-strip .back.live-back{
  background:var(--opp-sleeve-image) center/cover no-repeat !important;
}

/* Square sleeve corners (default). Conform toggle restores card rounding. */
html:not(.sleeve-conform) #screen-game.has-my-sleeve .my-mat .card-back-fill,
html:not(.sleeve-conform) #screen-game.has-my-sleeve .my-mat .deck-pile:not(.wr-pile) .deck-stack,
html:not(.sleeve-conform) #screen-game.has-my-sleeve .my-hand-strip .hand-flip-back,
html:not(.sleeve-conform) #screen-game.has-opp-sleeve .opp-mat .card-back-fill,
html:not(.sleeve-conform) #screen-game.has-opp-sleeve .opp-mat .deck-pile:not(.wr-pile) .deck-stack,
html:not(.sleeve-conform) #screen-game.has-opp-sleeve .opp-hand-strip .opp-hand-card{
  border-radius:var(--sleeve-square-radius);
}
html.sleeve-conform #screen-game.has-my-sleeve .my-mat .card-back-fill,
html.sleeve-conform #screen-game.has-my-sleeve .my-mat .deck-pile:not(.wr-pile) .deck-stack,
html.sleeve-conform #screen-game.has-opp-sleeve .opp-mat .card-back-fill,
html.sleeve-conform #screen-game.has-opp-sleeve .opp-mat .deck-pile:not(.wr-pile) .deck-stack,
html.sleeve-conform #screen-game.has-opp-sleeve .opp-hand-strip .opp-hand-card{
  border-radius:inherit;
}

/* ── Face-up peek: hand only (rim). Stage/live stay plain face-up —
   peek ::before + child z-index overrides broke slot sizing / visibility. */
html:not(.sleeve-conform) #screen-game.has-my-sleeve .my-hand-strip .hcard,
html:not(.sleeve-conform) #screen-game.has-opp-sleeve .opp-hand-strip .opp-hand-card{
  overflow:visible;
}

html:not(.sleeve-conform) #screen-game.has-my-sleeve .my-hand-strip .hcard::after,
html:not(.sleeve-conform) #screen-game.has-opp-sleeve .opp-hand-strip .opp-hand-card::after{
  content:'';
  position:absolute;
  inset:calc(var(--sleeve-peek) * -1);
  border-radius:var(--sleeve-square-radius);
  z-index:-1;
  pointer-events:none;
  opacity:var(--sleeve-peek-opacity);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-sizing:border-box;
  padding:var(--sleeve-peek);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite:exclude;
}

html:not(.sleeve-conform) #screen-game.has-my-sleeve .my-hand-strip .hcard::after{
  background-image:var(--my-sleeve-image);
}
html:not(.sleeve-conform) #screen-game.has-opp-sleeve .opp-hand-strip .opp-hand-card::after{
  background-image:var(--opp-sleeve-image);
}

/* Draw-flip rotates .hand-flip-inner only — peek on .hcard would stay put. */
html:not(.sleeve-conform) #screen-game .my-hand-strip .hcard.hand-draw-flip::after,
html:not(.sleeve-conform) #screen-game .opp-hand-strip .opp-hand-card.hand-draw-flip::after,
html:not(.sleeve-conform) #screen-game .my-hand-strip .hcard.hand-draw-flip::before,
html:not(.sleeve-conform) #screen-game .opp-hand-strip .opp-hand-card.hand-draw-flip::before{
  content:none !important;
  display:none !important;
}

html.sleeve-conform #screen-game .hcard::after,
html.sleeve-conform #screen-game .opp-hand-card::after{
  content:none;
  display:none;
}

/* ── Deck builder picker (single current + overlay) ── */
#screen-deck .deck-builder-meta__sleeve{
  flex:0 0 auto;
  min-width:0;
}
#screen-deck .deck-builder-meta__sleeve .deck-builder-hint--compact{
  display:none;
}
#screen-deck .deck-builder-meta__sleeve #deck-sleeve-empty-hint:not([hidden]){
  display:block;
}
.deck-sleeve-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:stretch;
}
.deck-sleeve-current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.22);
  color:#fff;
  cursor:pointer;
  font:inherit;
}
.deck-sleeve-current:hover{
  border-color:rgba(255,107,168,.55);
  background:rgba(0,0,0,.3);
}
.deck-sleeve-current__art{
  width:52px;
  height:auto;
  aspect-ratio:63 / 88;
  flex:0 0 auto;
  border-radius:4px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.deck-sleeve-current__art--none{
  border-radius:4px;
  width:40px;
  height:auto;
  aspect-ratio:63/88;
}
.deck-sleeve-current__art.is-landscape{
  background-size:contain;
  background-color:rgba(0,0,0,.35);
}
.deck-sleeve-current__meta,
.deck-sleeve-current__name,
.deck-sleeve-current__hint{
  display:none;
}
.deck-sleeve-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:72px;
  padding:6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.22);
  color:#fff;
  cursor:pointer;
  font:inherit;
}
.deck-sleeve-tile:hover{
  border-color:rgba(255,107,168,.55);
}
.deck-sleeve-tile.is-selected{
  border-color:var(--pink,#FF6BA8);
  box-shadow:0 0 0 1px var(--pink,#FF6BA8);
}
.deck-sleeve-tile__art{
  width:52px;
  height:52px;
  border-radius:2px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.deck-sleeve-tile__art.is-landscape{
  background-size:contain;
  background-color:rgba(0,0,0,.35);
}
.deck-sleeve-tile__art--none{
  border-radius:4px;
  aspect-ratio:63/88;
  width:38px;
  height:auto;
}
.deck-sleeve-tile__label{
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#deck-sleeve-empty-hint{margin-top:4px}

.overlay.deck-sleeve-overlay{
  z-index:920;
  padding:clamp(12px,3vw,24px) 16px;
  align-items:center;
  justify-content:center;
  overflow:auto;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;
}
.deck-sleeve-overlay__shell{
  max-width:min(720px,96vw);
  width:100%;
  margin-block:auto;
  padding:clamp(14px,2.4vw,22px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.44);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(38,132,210,.92);
  box-shadow:0 18px 52px rgba(0,0,0,.45),0 0 32px rgba(52,163,243,.24),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#fff;
  max-height:min(86vh,820px);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.deck-sleeve-overlay__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  flex:0 0 auto;
}
.deck-sleeve-overlay__head h2{
  margin:0;
  font-size:clamp(18px,3.2vw,24px);
  font-weight:800;
  letter-spacing:.04em;
}
.deck-sleeve-overlay__close{
  flex:0 0 auto;
}
.deck-sleeve-overlay__lead{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.82);
  flex:0 0 auto;
}
.deck-sleeve-overlay__grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-content:flex-start;
  overflow:auto;
  min-height:0;
  flex:1 1 auto;
  padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch;
}
.deck-sleeve-overlay__grid::-webkit-scrollbar{width:6px}
.deck-sleeve-overlay__grid::-webkit-scrollbar-track{
  background:rgba(0,0,0,.15);
  border-radius:999px;
}
.deck-sleeve-overlay__grid::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.35);
  border-radius:999px;
}

/* Sleeve Shop */
.sleeve-shop-gens{
  display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px;
  /* Let category "New" badges bleed without clipping */
  overflow:visible;
}
.sleeve-shop-gen{
  appearance:none;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.22);
  color:#fff;border-radius:10px;padding:6px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;line-height:1.1;position:relative;
}
.sleeve-shop-gen.is-active{
  border-color:rgba(255,210,120,.7);background:rgba(255,190,40,.22);color:#ffe7a8;
}
.sleeve-shop-gen__icon{
  width:28px;height:28px;object-fit:contain;flex:0 0 auto;display:block;
}
.sleeve-shop-gen__label{white-space:nowrap}
.sleeve-shop-chars{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:0;
  overflow:visible;
}
.sleeve-shop-char{
  appearance:none;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.2);
  border-radius:12px;padding:8px 6px 0;color:#fff;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:4px;min-height:0;overflow:hidden;
  aspect-ratio:1 / 1;box-sizing:border-box;position:relative;
}
.sleeve-shop-char.is-shop-new{
  /* Badge may sit above / beside the box; keep portraits clipped at the bottom. */
  overflow:visible;
  clip-path:inset(-14px -12px 0 -12px);
}
.sleeve-shop-char:hover{border-color:rgba(255,196,120,.55)}
.sleeve-shop-char__name{
  font-size:11px;font-weight:700;text-align:center;line-height:1.2;
  flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sleeve-shop-char__count{font-size:10px;opacity:.7;flex:0 0 auto}
.sleeve-shop-char__icon{
  width:100%;height:auto;max-width:100%;max-height:none;
  object-fit:cover;object-position:top center;border-radius:6px 6px 0 0;background:transparent;display:block;
  flex:1 1 auto;min-height:0;align-self:stretch;margin-top:auto;margin-bottom:0;
}
.sleeve-shop-char.is-shop-new .sleeve-shop-char__icon{
  /* Match tile bottom radius when overflow is open for the New badge */
  border-bottom-left-radius:11px;border-bottom-right-radius:11px;
}
.sleeve-shop-char__icon--unit,
.sleeve-shop-char--group .sleeve-shop-char__icon{
  object-fit:contain;object-position:center bottom;max-width:100%;border-radius:0;
}
.sleeve-shop-browse{
  display:flex;align-items:flex-start;gap:20px;margin-top:10px;min-width:0;
}
#screen-sleeve-shop .account-shell.wide{
  max-width:min(1120px,96vw);
}
.sleeve-shop-main{
  flex:1 1 auto;min-width:0;
}
.sleeve-shop-hover-panel{
  position:sticky;
  top:max(12px, 8vh);
  flex:0 0 320px;width:320px;max-width:42vw;
  align-self:flex-start;
  margin-top:0 !important;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;
  padding:16px 14px;border-radius:14px;z-index:5;
  background:rgba(4,10,22,.96);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  opacity:1 !important;pointer-events:none;
  min-height:0;
}
.sleeve-shop-hover-panel .hc-empty{
  display:block;margin:0;padding:28px 10px;text-align:center;
  font-size:13px;line-height:1.4;color:rgba(255,255,255,.62);
}
.sleeve-shop-hover-panel.has-preview .hc-empty{display:none}
.sleeve-shop-hover-panel .hc-img{
  display:none;width:100%;max-width:280px;aspect-ratio:63 / 88;object-fit:cover;
  border-radius:8px;background:#111;box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.sleeve-shop-hover-panel .hc-img.is-uncropped-landscape{
  object-fit:contain;
}
.sleeve-shop-hover-panel .hc-img.is-unit{
  aspect-ratio:1 / 1;object-fit:contain;background:transparent;border-radius:0;box-shadow:none;
}
.sleeve-shop-hover-panel .hc-img.show{display:block}
.sleeve-shop-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;
  margin-top:10px;align-items:stretch;
}
.sleeve-shop-tile{
  display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);
  min-height:100%;height:100%;box-sizing:border-box;
}
.sleeve-shop-tile.is-owned{border-color:rgba(120,220,160,.4)}
.sleeve-shop-tile__art{
  width:100%;max-width:112px;margin:0 auto;aspect-ratio:63 / 88;border-radius:4px;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  background-color:#111;box-shadow:0 4px 12px rgba(0,0,0,.35);flex:0 0 auto;cursor:zoom-in;
}
.sleeve-shop-tile__art.is-uncropped-landscape{
  background-size:contain;
}
.sleeve-shop-tile__name{
  font-size:11px;font-weight:700;line-height:1.3;
  flex:1 1 auto;min-height:2.6em;
}
.sleeve-shop-tile__actions{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:auto;flex:0 0 auto;min-height:28px;
}
.sleeve-shop-owned{font-size:11px;font-weight:800;color:#9ef0c0}
.sleeve-shop-price{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:800;color:#ffe7a8;letter-spacing:.02em;
}
.sleeve-shop-price.is-unaffordable{color:#fc8181;opacity:.85}
.sleeve-shop-tile__actions .btn-smol{
  display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:12px;
}
/* Affordable buys should not look like an error (default .btn-smol is pink). */
.sleeve-shop-tile__actions .sleeve-shop-buy.is-affordable{
  background:rgba(255,210,120,.16);
  border-color:rgba(255,210,120,.42);
  color:#ffe7a8;
}
.sleeve-shop-tile__actions .sleeve-shop-buy.is-affordable:hover:not(:disabled){
  background:rgba(255,210,120,.28);
  border-color:rgba(255,220,150,.65);
  color:#fff0c8;
}
.sleeve-shop-tile__actions .sleeve-shop-buy.is-unaffordable{
  background:rgba(229,62,62,.12);
  border-color:rgba(229,62,62,.32);
  color:#fc8181;
  opacity:.72;
  cursor:not-allowed;
}
@media (max-width:720px){
  .sleeve-shop-browse{flex-direction:column}
  .sleeve-shop-hover-panel{display:none}
}
@media (max-width:980px){
  .sleeve-shop-hover-panel{
    flex-basis:240px;width:240px;
  }
  .sleeve-shop-hover-panel .hc-img{max-width:210px}
}

/* First-equip intro */
.sleeve-equip-intro{
  position:fixed;inset:0;z-index:9800;display:none;align-items:center;justify-content:center;
  background:rgba(4,10,24,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.sleeve-equip-intro.is-open{display:flex}
.sleeve-equip-intro__stage{
  position:relative;width:min(180px,42vw);aspect-ratio:63/88;border-radius:8px;overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.sleeve-equip-intro__back,
.sleeve-equip-intro__sleeve{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.sleeve-equip-intro__sleeve{
  transform:translateY(-110%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.sleeve-equip-intro__sleeve.is-in{transform:translateY(0)}
.sleeve-equip-intro__shine{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-120%);
}
.sleeve-equip-intro.is-shine .sleeve-equip-intro__shine{
  opacity:1;
  animation:sleeve-equip-shine .7s ease .45s both;
}
@keyframes sleeve-equip-shine{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
@media (prefers-reduced-motion: reduce){
  .sleeve-equip-intro__sleeve{transition:none}
  .sleeve-equip-intro.is-shine .sleeve-equip-intro__shine{animation:none;opacity:0}
}