*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",sans-serif;
  background:radial-gradient(circle at 20% 0%,rgba(217,167,255,.35),transparent 30%),
  radial-gradient(circle at 90% 20%,rgba(255,217,120,.16),transparent 30%),
  linear-gradient(180deg,#160823,#06030a 80%);
  color:white;
}
.app{max-width:520px;height:100%;margin:0 auto;position:relative;overflow:hidden;background:rgba(255,255,255,.025)}
.top{
  position:absolute;top:0;left:0;right:0;height:62px;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(7,3,13,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.top strong{font-size:14px;letter-spacing:-.03em}
.top span{font-size:12px;color:rgba(255,255,255,.55)}
.screen{
  position:absolute;inset:0;padding:86px 20px 26px;
  display:flex;flex-direction:column;
  opacity:0;transform:translateX(28px);pointer-events:none;
  transition:.32s ease;
}
.screen.active{opacity:1;transform:translateX(0);pointer-events:auto}
.badge{display:inline-block;width:max-content;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);font-size:12px;color:#f4dcff;margin-bottom:18px}
h1{font-size:42px;line-height:1.05;margin:0 0 16px;letter-spacing:-.06em}
h2{font-size:30px;margin:0 0 10px;letter-spacing:-.04em}
p{line-height:1.65;color:rgba(255,255,255,.72)}
button{
  width:100%;border:0;border-radius:18px;padding:16px 18px;
  font-size:16px;font-weight:900;color:#1b102b;
  background:linear-gradient(135deg,#ffd978,#d9a7ff);
  margin-top:10px;
}
button.sub{background:rgba(255,255,255,.1);color:white;border:1px solid rgba(255,255,255,.13)}
label{margin-top:12px;margin-bottom:8px;color:#f3dfff;font-size:14px;font-weight:800}
select,textarea{
  width:100%;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);color:white;padding:14px;font-size:16px
}
textarea{height:110px;resize:none}
.deck-preview{position:relative;height:190px;margin:20px 0}
.deck-preview div{
  position:absolute;left:50%;top:25px;width:105px;height:156px;margin-left:-52px;
  border-radius:20px;background:cardback;border:1px solid rgba(255,255,255,.15);
  background:radial-gradient(circle,rgba(255,217,120,.18),transparent 35%),repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 2px,transparent 2px 9px),linear-gradient(145deg,#321750,#090411);
  display:flex;align-items:center;justify-content:center;color:#ffd978;font-size:30px
}
.deck-preview div:nth-child(1){transform:rotate(-22deg) translateX(-65px)}
.deck-preview div:nth-child(2){transform:rotate(-8deg) translateX(-22px)}
.deck-preview div:nth-child(3){transform:rotate(8deg) translateX(22px)}
.deck-preview div:nth-child(4){transform:rotate(22deg) translateX(65px)}
.shuffle-deck{position:relative;flex:1;min-height:300px}
.shuffle-deck div{
  position:absolute;left:50%;top:70px;width:132px;height:198px;margin-left:-66px;
  border-radius:22px;background:radial-gradient(circle,rgba(255,217,120,.18),transparent 35%),repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 9px),linear-gradient(145deg,#321750,#090411);
  border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#ffd978;font-size:38px
}
.shuffle-deck div:nth-child(1){animation:mix1 .7s infinite}
.shuffle-deck div:nth-child(2){animation:mix2 .7s infinite}
.shuffle-deck div:nth-child(3){animation:mix3 .7s infinite}
.shuffle-deck div:nth-child(4){animation:mix4 .7s infinite}
.shuffle-deck div:nth-child(5){animation:mix5 .7s infinite}
@keyframes mix1{50%{transform:rotate(-26deg) translate(-82px,18px)}}
@keyframes mix2{50%{transform:rotate(18deg) translate(72px,-10px)}}
@keyframes mix3{50%{transform:rotate(0deg) translate(0,45px)}}
@keyframes mix4{50%{transform:rotate(-14deg) translate(-45px,-32px)}}
@keyframes mix5{50%{transform:rotate(25deg) translate(50px,30px)}}
.small{text-align:center;font-size:13px;color:rgba(255,255,255,.55)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;overflow:auto}
.card{
  aspect-ratio:2/3;min-height:105px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(circle,rgba(255,217,120,.18),transparent 35%),repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 8px),linear-gradient(145deg,#2d1649,#090411);
  color:#ffd978;font-size:22px;font-weight:900;display:flex;align-items:center;justify-content:center
}
.card.chosen{border-color:#ffd978;background:linear-gradient(145deg,#5e3280,#160c23);color:white}
.card.disabled{opacity:.35;pointer-events:none}
.picked{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pickmini{min-height:64px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:9px;font-size:12px;color:rgba(255,255,255,.65)}
.pickmini b{display:block;color:#ffd978;margin-bottom:4px}
.reveal-card{border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);overflow:hidden;margin-bottom:12px}
.art{height:150px;background:#160a25}
.art svg{width:100%;height:100%}
.reveal-text{padding:14px}
.reveal-text b{font-size:18px}
.reveal-text p{margin:6px 0 0;font-size:14px}
.result{overflow:auto}
.block,.paybox{padding:16px;border-radius:20px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11);margin-bottom:12px}
.block b{display:block;color:#ffd978;margin-bottom:8px}
.paybox strong{display:block;font-size:32px;color:#ffd978;margin:10px 0}
.pay-method{padding:13px;border-radius:14px;background:rgba(0,0,0,.23);border:1px solid rgba(255,255,255,.1);margin:8px 0}
.toast{position:absolute;left:20px;right:20px;bottom:24px;z-index:100;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.12);display:none}
.toast.show{display:block}
@media(max-height:720px){h1{font-size:35px}.deck-preview{height:145px}.card{min-height:80px}.art{height:120px}}