/* Latest user layout: three stacked cards. Study overlay and motion are retained. */
.modal-layer.upgrade-layer {
  background:radial-gradient(#1e14464d,#140e32bf);backdrop-filter:none;
  padding:24px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  align-items:flex-start;isolation:isolate;animation:choice-fade .2s ease;transition:opacity .19s ease;
}
#upgrade-modal {
  width:480px;max-width:100%;padding:0;margin:auto;max-height:none;overflow:visible;
  background:none;border:0;box-shadow:none;border-radius:0;animation:none;flex-shrink:0;color:#fff9ff;
}
#upgrade-modal.closing {animation:choice-fade .19s reverse both;}
.choice-heading {display:flex;justify-content:center;margin:0 0 16px;animation:choice-heading-in .3s cubic-bezier(.2,1.5,.4,1) both;}
#upgrade-modal h2 {
  margin:0;padding:5px 32px;border-radius:16px;font-size:32px;line-height:1.4;font-weight:900;
  letter-spacing:.02em;color:#fff;transform:skew(-8deg);text-shadow:0 3px #00000026;
  background:repeating-linear-gradient(135deg,#fff0 0 12px,#ffffff25 12px 24px),linear-gradient(100deg,#ffad48,#ff637f);
  box-shadow:0 10px 28px #1a124638,0 2px 6px #1a12461f;
}
#upgrade-cards {display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:0 0 16px;}
#upgrade-modal .choice-card {
  --tint:#ffcb6e;--deep:#ffae59;--paper:#fffaff;
  width:100%;min-width:0;min-height:0;padding:0;display:flex;flex-direction:column;position:relative;
  color:#322443;font-weight:700;text-align:left;overflow:hidden;border:0;border-radius:22px;
  background:var(--paper);box-shadow:0 10px 28px #1a124638,0 2px 6px #1a12461f;
  transition:transform .12s,box-shadow .15s,filter .15s,opacity .18s;
  animation:choice-deal .3s cubic-bezier(.2,1.5,.4,1) calc(var(--i)*50ms) backwards;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
#upgrade-modal .theme-coral {--tint:#ffb381;--deep:#fc6385;}
#upgrade-modal .theme-sky {--tint:#7be0fc;--deep:#4c9dfa;}
#upgrade-modal .theme-gold {--tint:#ffe68d;--deep:#ffbd63;}
#upgrade-modal .theme-mint {--tint:#c4ed9b;--deep:#59c7ac;}
#upgrade-modal .theme-rose {--tint:#ffc9e0;--deep:#bb8cea;}
.choice-card::after {
  content:"";position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none;z-index:8;
  animation:choice-reveal .3s ease-out calc(var(--i)*50ms + 120ms) backwards;
}
.card-art {
  display:flex;justify-content:center;align-items:center;height:clamp(70px,10vh,96px);flex-shrink:0;width:100%;position:relative;isolation:isolate;overflow:hidden;
  background:repeating-linear-gradient(135deg,#fff0 0 12px,#ffffff1c 12px 24px),radial-gradient(ellipse at 47% 45%,#fff7bc80,transparent 56%),linear-gradient(125deg,var(--tint),var(--deep));
  box-shadow:inset 0 3px 0 #fff4;
}
.card-art::after {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(110deg,#fff0 30%,#fffa 50%,#fff0 70%) -200% 0/200% 100%;opacity:0;
}
.choice-card[data-rarity="2"] .card-art::after,.choice-card[data-rarity="3"] .card-art::after,.choice-card[data-rarity="4"] .card-art::after {opacity:.65;animation:choice-shine 2.4s ease infinite;}
.card-rarity,.card-kind {position:absolute;top:10px;z-index:3;border-radius:99px;font-size:11px;font-weight:900;line-height:1.5;padding:2px 10px;}
.card-rarity {left:10px;display:flex;align-items:center;gap:5px;background:#fff9edeb;box-shadow:0 2px 2px #69365f18;}
.card-rarity i {width:7px;height:7px;border-radius:2px;background:var(--rarity);transform:rotate(45deg);}
.card-kind {right:10px;background:#46305bbf;color:white;}
#upgrade-modal .card-icon {width:76px;height:76px;max-height:calc(100% - 6px);object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 4px #42255266);position:relative;z-index:2;transition:transform .18s;}
.card-mascot {position:absolute;right:3%;bottom:-20px;width:124px;height:124px;background:url('assets/cards/naiwa-thinking.png') center/contain no-repeat;opacity:.28;filter:grayscale(1) brightness(2.4);transform:rotate(7deg);z-index:1;}
.card-streak {position:absolute;left:-40px;bottom:-30px;width:180px;height:60px;border:7px solid #fff3;border-radius:50%;transform:rotate(-16deg);}
.card-star {position:absolute;background:#fff2ac;clip-path:polygon(50% 0,65% 33%,100% 50%,65% 67%,50% 100%,35% 67%,0 50%,35% 33%);}
.star-a {width:17px;height:17px;left:24%;top:40%;transform:rotate(8deg);}
.star-b {width:11px;height:11px;left:66%;top:72%;}
.evolve-ribbon {position:absolute;left:50%;bottom:5px;transform:translateX(-50%);z-index:5;color:#62421c;background:#fff1b7;border-radius:10px;padding:2px 10px;font-size:10px;box-shadow:0 2px #b87b4560;white-space:nowrap;}
.card-body {position:relative;display:flex;flex-direction:column;gap:4px;min-height:105px;padding:10px 20px 11px;background:linear-gradient(115deg,#fffdfd,#fbf5fc);isolation:isolate;}
.card-body::before {content:"";position:absolute;left:0;top:-7px;width:100%;height:10px;border-radius:65% 80% 0 0;background:linear-gradient(115deg,#fffdfd,#fbf5fc);z-index:-1;}
.card-title {font-size:21px;line-height:1.18;font-weight:900;padding-right:30px;}
.card-level {font-size:11px;line-height:1.4;color:#756286;}
.card-detail {display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;line-height:1.5;color:#493758;margin:1px 0;}
.card-detail>span {position:relative;padding-left:13px;}
.card-detail>span::before {content:"";position:absolute;left:1px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--rarity);}
.card-preview {display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;font-size:12px;line-height:1.5;margin:0;padding-right:40px;color:#756286;}
.card-preview>span+span {display:flex;gap:4px;align-items:baseline;}
.card-preview s {text-decoration:none;color:#756286;}
.card-preview i {font-style:normal;color:#2d947e;}
#upgrade-modal .card-preview b {font-size:12px;margin:0;color:#16834c;}
.card-key {position:absolute;right:16px;bottom:10px;padding:1px 8px;border-radius:8px;background:#5a5478;color:white;font-size:12px;line-height:1.6;font-weight:900;}
.ban-warning {position:absolute;inset:0;background:#fff4f3f2;color:#b33750;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:16px;opacity:0;pointer-events:none;transition:opacity .15s;}
.ban-pending .ban-warning {opacity:1;}
#upgrade-modal .choice-card.ban-pending {outline:4px solid #ff6b86;outline-offset:3px;}
#upgrade-cards.banning .card-art {filter:saturate(.7);}
#upgrade-modal .choice-card:focus-visible {outline:3px solid #fff4c2;outline-offset:4px;}
@media(hover:hover) {
  #upgrade-modal .choice-card:hover {transform:translateY(-4px) scale(1.05);box-shadow:0 0 0 4px var(--rarity),0 18px 40px #1a124659;z-index:2;}
  #upgrade-modal .choice-card:hover .card-icon {transform:translateY(-3px) rotate(-4deg);}
}
#upgrade-modal .choice-card:active {transform:translateY(1px) scale(.988);}
#upgrade-modal .choice-card.chosen {transform:translateY(-4px) scale(1.05);filter:brightness(1.12);}
#upgrade-modal .choice-card.not-chosen,#upgrade-cards.redealing .choice-card {opacity:0;transform:translateY(12px) scale(.96);transition:opacity .15s,transform .15s;}
.choice-actions {display:flex;gap:12px;justify-content:center;animation:choice-tools-in .3s ease-out .2s backwards;}
.choice-action {display:flex;align-items:center;justify-content:center;gap:6px;min-width:136px;background:#fffdfb;border:0;border-radius:99px;padding:10px 14px;color:#493758;font-size:13px;font-weight:900;box-shadow:inset 0 -4px #20143f22,0 5px 12px #21113933;}
#reroll {background:linear-gradient(#61b9ff,#3487f7);color:#fff;}
#banish-upgrade {background:linear-gradient(#ff8790,#f54866);color:#fff;}
.choice-action svg {width:17px;height:17px;stroke-width:2.3;}
.choice-action b {font:inherit;margin:0;}
.choice-action b::before {content:"(";}
.choice-action b::after {content:")";}
.choice-action kbd {background:#ffffffe6;color:#554568;border:0;font-size:10px;line-height:1.5;padding:2px 6px;margin-left:3px;border-radius:6px;box-shadow:0 2px #1a12461a;}
#banish-upgrade[aria-pressed="true"] {background:#ffdfdf;color:#a82c48;box-shadow:inset 0 -4px #d18caa,0 0 0 2px #fff7;}
.choice-action:disabled {opacity:.48;cursor:not-allowed;transform:none;filter:grayscale(.5);}
#upgrade-modal .choice-status {text-align:center;font-size:12px;margin:13px 0 0;color:#ece3f6;min-height:18px;line-height:1.5;text-shadow:0 1px 3px #160c38;animation:choice-tools-in .3s ease-out .25s backwards;}
.choice-build {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:12px;color:white;margin:12px 0 0;animation:choice-tools-in .3s ease-out .3s backwards;}
.choice-build>span {padding:4px 13px;border-radius:99px;background:#7863adba;box-shadow:0 2px 4px #20143f22;}
.choice-build>span:first-child {background:#46b14fe0;}
.choice-build i {display:none;}
.choice-foot {display:flex;justify-content:center;align-items:center;gap:20px;margin-top:14px;color:#e2d8ec;font-size:11px;animation:choice-tools-in .3s ease-out .35s backwards;}
.choice-foot button {display:flex;align-items:center;gap:6px;background:#fffffff0;border:0;border-radius:99px;color:#4d3c67;font-size:12px;font-weight:800;padding:8px 14px;box-shadow:inset 0 -3px #1a12461f;}
.choice-foot svg {width:14px;height:14px;}
.choice-rules {position:fixed;right:24px;top:50%;width:280px;max-height:calc(100vh - 48px);overflow:auto;z-index:20;background:#fff8fe;color:#4b395f;border:1px solid #fff9;border-radius:20px;box-shadow:0 18px 60px #21153890;padding:19px;opacity:0;transform:translateY(calc(-50% + 12px)) scale(.97);pointer-events:none;transition:opacity .2s,transform .2s;}
.choice-rules.open {opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto;}
.rules-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;}
.rules-heading button {display:grid;place-items:center;width:25px;height:25px;background:none;border:0;padding:2px;}
.rules-heading svg {width:17px;height:17px;}
#choice-rarity-odds {display:grid;gap:7px;}
#choice-rarity-odds>span {display:flex;gap:8px;align-items:center;font-size:12px;}
#choice-rarity-odds i {width:9px;height:9px;border-radius:3px;}
#choice-rarity-odds b {margin-left:auto;font-variant-numeric:tabular-nums;}
.choice-rules p {font-size:11px;line-height:1.8;color:#87728e;margin:13px 0 0;}
@media(max-width:1400px) {
  .choice-rules {right:18px;top:auto;bottom:18px;max-height:70vh;width:min(340px,calc(100% - 36px));transform:translateY(12px) scale(.97);}
  .choice-rules.open {transform:translateY(0) scale(1);}
}
@media(max-height:860px) {
  .modal-layer.upgrade-layer {padding:14px 22px;}
  .choice-heading {margin-bottom:12px;}
  #upgrade-modal h2 {font-size:28px;padding:4px 28px;}
  #upgrade-cards {gap:12px;margin-bottom:14px;}
  .card-art {height:70px;}
  .card-body {min-height:96px;padding:7px 20px 9px;gap:2px;}
  .card-title {font-size:20px;}
  .card-mascot {width:106px;height:106px;}
  .choice-action {padding:9px 12px;}
  #upgrade-modal .choice-status {margin-top:9px;font-size:11px;}
  .choice-build {display:none;}
  .choice-foot {margin-top:10px;}
}
@media(max-width:600px) {
  .modal-layer.upgrade-layer {padding:18px max(18px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right));}
  #upgrade-modal {width:440px;}
  #upgrade-modal h2 {font-size:28px;padding:5px 27px;}
  .card-body {padding-left:17px;padding-right:17px;}
  .card-detail {font-size:11px;gap:2px 8px;}
  .card-level {font-size:10px;}
  .card-preview,#upgrade-modal .card-preview b {font-size:11px;}
  .card-mascot {right:0;}
  .choice-actions {gap:8px;}
  .choice-action {min-width:0;flex:1;padding:11px 5px;gap:4px;font-size:12px;}
  .choice-action svg {width:14px;height:14px;}
  .choice-action kbd {margin-left:0;padding:1px 3px;font-size:9px;}
  .choice-foot {gap:12px;font-size:10px;}
  .choice-foot button {font-size:11px;padding:8px 10px;}
}
@media(pointer:coarse) {.choice-action kbd,.card-key,.choice-foot>span {display:none;}}
@media(prefers-reduced-motion:reduce) {
  .modal-layer.upgrade-layer,#upgrade-modal .choice-card,.choice-heading,.choice-actions,.choice-status,.choice-build,.choice-foot,.choice-card::after,.choice-card .card-art::after {animation:none!important;}
  #upgrade-modal .choice-card:hover,#upgrade-modal .choice-card:focus-visible,#upgrade-modal .choice-card:hover .card-icon {transform:none;}
}
@keyframes choice-fade {from{opacity:0}to{opacity:1}}
@keyframes choice-deal {from{opacity:0;transform:translateY(36px) scale(.88)}}
@keyframes choice-reveal {from{opacity:.7}to{opacity:0}}
@keyframes choice-shine {from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes choice-heading-in {from{opacity:0;transform:translateY(-12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes choice-tools-in {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}