:root{
  --pink:#ff7eb6; --pink2:#ffb3d4; --lav:#b9a6ff; --mint:#9be8cf; --sky:#a8d8ff; --butter:#ffe9a3;
  --ink:#4a3556; --ink2:#7d6a8a; --card:#ffffffd9; --line:#f3d3e6; --shadow:0 6px 0 #e9b7d2;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#ffeaf4;color:var(--ink);
  font-family:"Jua","Gowun Dodum","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;
  background:linear-gradient(180deg,#fff0f8 0%,#f1ebff 55%,#e7f7ff 100%);box-shadow:0 0 40px #d9c4f044}
#app::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(circle at 15% 12%,#ffd6ea 0 40px,transparent 41px),radial-gradient(circle at 88% 22%,#d6ecff 0 55px,transparent 56px),
  radial-gradient(circle at 78% 78%,#e6ffe9 0 45px,transparent 46px),radial-gradient(circle at 10% 70%,#fff3c6 0 36px,transparent 37px)}
#hud{position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(8px + var(--safe-t)) 12px 6px}
#coin-pill{display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--butter);border-radius:999px;padding:4px 14px 4px 8px;font-size:20px;box-shadow:0 3px 0 #f2d77a;min-width:96px}
#coin-pill.pop{animation:pop .35s}
#coin-pill.shake{animation:shake .4s}
.coin-ico{font-size:22px}
#toy-title{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
#toy-name{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.badge{font-size:12px;padding:1px 9px;border-radius:999px;color:#fff;background:#aaa}
.icon-btn{width:42px;height:42px;border-radius:50%;background:#fff;border:3px solid var(--line);font-size:20px;box-shadow:0 3px 0 #ecc9de;display:grid;place-items:center}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #ecc9de}
#screens{position:relative;flex:1;min-height:0}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}
.scroll{flex:1;overflow-y:auto;padding:6px 14px 18px;-webkit-overflow-scrolling:touch}
h2,h3{margin:0 0 6px}
.sub{color:var(--ink2);font-size:14px;margin:4px 0 10px;line-height:1.45}
.fine{font-size:12px;color:var(--ink2);margin:8px 0 0}

/* 스테이지 */
#stage{position:relative;flex:1;min-height:200px;touch-action:none;overflow:hidden}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#fx-front{z-index:3;cursor:grab}
#floaters{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.floater{position:absolute;transform:translate(-50%,0);font-size:26px;color:#ff9a1f;font-weight:900;text-shadow:0 2px 0 #fff,0 0 8px #fff,0 3px 0 #ffd27a;animation:floatUp 1.05s ease-out forwards;white-space:nowrap}
.floater.big{font-size:34px;color:#ff5fa8}
.floater::before{content:"🪙";font-size:.8em;margin-right:2px}
#hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:15px;color:var(--ink2);pointer-events:none;transition:opacity .5s;z-index:2}
#hint.hide{opacity:0}
#play-info{position:relative;z-index:2;padding:0 14px 4px;display:flex;flex-direction:column;gap:4px;align-items:center}
#type-hint{font-size:13px;color:var(--ink2);text-align:center}
#comfort{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ink2)}
#comfort .bar{width:110px;height:8px;border-radius:9px;background:#ffffffaa;border:1px solid var(--line);overflow:hidden}
#comfort-bar{display:block;height:100%;width:100%;background:linear-gradient(90deg,#9be8cf,#ffe08a);transition:width .2s,background .3s}
#shelf{position:relative;z-index:2;display:flex;gap:8px;overflow-x:auto;padding:6px 12px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
#shelf::-webkit-scrollbar{display:none}
.shelf-item{flex:0 0 auto;width:62px;height:62px;border-radius:18px;background:#ffffffcc;border:3px solid var(--line);padding:0;position:relative;box-shadow:0 3px 0 #ecc9de}
.shelf-item img{width:100%;height:100%;object-fit:contain;border-radius:14px;pointer-events:none}
.shelf-item.cur{border-color:var(--pink);transform:translateY(-3px);box-shadow:0 5px 0 #ff9fc8}
.shelf-item .lv{position:absolute;right:-2px;bottom:-2px;font-size:10px;background:var(--ink);color:#fff;border-radius:8px;padding:0 5px}

/* 탭 */
#tabs{position:relative;z-index:6;display:flex;gap:4px;padding:6px 8px calc(8px + var(--safe-b));background:#ffffffd0;backdrop-filter:blur(8px);border-top:3px solid var(--line)}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 0;border-radius:16px;color:var(--ink2);font-size:12px;transition:.15s}
#tabs button i{font-style:normal;font-size:24px;line-height:1.2;transition:transform .15s}
#tabs button.active{background:linear-gradient(180deg,#ffe3f0,#ffd0e6);color:var(--ink);box-shadow:inset 0 -3px 0 #ffb3d4}
#tabs button.active i{transform:translateY(-2px) scale(1.12)}

/* 버튼/카드 */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:10px 18px;border-radius:22px;background:linear-gradient(180deg,#ff9ac6,#ff6fae);color:#fff;font-size:18px;text-shadow:0 2px 0 #d04a88;box-shadow:0 6px 0 #d4508c,0 10px 14px #ff6fae44;transition:transform .08s,box-shadow .08s;min-height:48px}
.btn small{font-size:13px;opacity:.95;text-shadow:none}
.btn small em{font-style:normal;background:#fff;color:#e0508f;border-radius:8px;padding:0 5px;margin-left:3px;font-size:11px}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #d4508c}
.btn.alt{background:linear-gradient(180deg,#b5a2ff,#8e78f5);text-shadow:0 2px 0 #5b46c0;box-shadow:0 6px 0 #6b55d0,0 10px 14px #8e78f544}
.btn.mint{background:linear-gradient(180deg,#7fe3c2,#43cfa3);text-shadow:0 2px 0 #249a77;box-shadow:0 6px 0 #2aa882}
.btn.ghost{background:#fff;color:var(--ink);text-shadow:none;box-shadow:0 5px 0 var(--line);border:3px solid var(--line)}
.btn[disabled]{filter:grayscale(.7);opacity:.6;pointer-events:none}
.btn.big{min-width:140px}
.card{background:var(--card);border:3px solid var(--line);border-radius:24px;padding:14px;margin:8px 0;box-shadow:0 4px 0 #f0d3e5}
.card.pink{background:linear-gradient(180deg,#fff,#ffeef7)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:0 12px 6px;scrollbar-width:none}
.chip{flex:0 0 auto;padding:6px 12px;border-radius:999px;background:#fff;border:3px solid var(--line);font-size:14px}
.chip.on{background:var(--pink2);border-color:var(--pink);color:#fff;text-shadow:0 1px 0 #d04a88}

/* 가챠 */
.gacha-hero{text-align:center;padding-top:6px}
.machine{width:150px;margin:0 auto 6px;position:relative;animation:bob 3s ease-in-out infinite}
.machine .dome{height:100px;border-radius:70px 70px 14px 14px;background:radial-gradient(circle at 35% 25%,#fff 0 12%,#e9f7ffcc 13%,#cfeaff99);border:4px solid #fff;box-shadow:0 0 0 3px #b8dcf5;position:relative;overflow:hidden}
.machine .dome i{position:absolute;width:30px;height:30px;border-radius:50%;border:3px solid #fff8}
.machine .dome i:nth-child(1){left:14px;top:50px;background:#ff9ec7}.machine .dome i:nth-child(2){left:48px;top:58px;background:#ffe08a}
.machine .dome i:nth-child(3){left:84px;top:46px;background:#9be8cf}.machine .dome i:nth-child(4){left:112px;top:56px;background:#b9a6ff}
.machine .dome i:nth-child(5){left:34px;top:24px;background:#a8d8ff}.machine .dome i:nth-child(6){left:84px;top:22px;background:#ffb3a8}
.machine .body{height:64px;border-radius:12px 12px 24px 24px;background:linear-gradient(180deg,#ff8fc0,#ff6fae);border:4px solid #fff;box-shadow:0 0 0 3px #f8a5c9,0 6px 0 #d4508c;position:relative}
.machine .slot{position:absolute;left:50%;bottom:10px;width:48px;height:24px;margin-left:-24px;border-radius:12px;background:#7a2f5a;border:3px solid #fff}
.machine .knob{position:absolute;left:50%;top:8px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#ffe08a;border:3px solid #fff;box-shadow:0 3px 0 #e2b84a}
.pull-btns{display:flex;gap:12px;justify-content:center;margin:10px 0 6px}
.odds table{width:100%;border-collapse:separate;border-spacing:0 5px;font-size:15px}
.odds td{padding:5px 8px;background:#fff;vertical-align:middle}
.odds td:first-child{border-radius:12px 0 0 12px;border-left:6px solid var(--c)}
.odds td:last-child{border-radius:0 12px 12px 0;text-align:right}
.odds .rn{font-weight:700;color:var(--c)}
.odds .small{font-size:12px;color:var(--ink2)}

/* 도감 */
.book-head{display:flex;justify-content:space-between;align-items:center;padding:4px 16px}
#book-count{font-size:15px;background:#fff;border-radius:999px;padding:3px 12px;border:3px solid var(--line)}
#book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bk{border-radius:20px;background:#fff;border:3px solid var(--rc,#ddd);padding:6px 4px 8px;text-align:center;position:relative;box-shadow:0 4px 0 var(--rc2,#eee);min-height:128px}
.bk img{width:78px;height:78px;object-fit:contain;display:block;margin:0 auto}
.bk .nm{font-size:13px;line-height:1.2;margin-top:2px;word-break:keep-all}
.bk .rr{font-size:11px;color:#fff;background:var(--rc);border-radius:8px;padding:0 6px;position:absolute;left:6px;top:6px}
.bk.locked img{filter:brightness(0) opacity(.22)}
.bk.locked{background:#f7f2fa}
.bk .lvl{font-size:10px;color:var(--ink2)}
.bk.has-legend{background:linear-gradient(180deg,#fff,#fff7da)}
.bk.has-myth{background:linear-gradient(135deg,#fff0fa,#eaf6ff,#fff7d6)}

/* 모달 */
#modal-root{position:absolute;inset:0;z-index:20;pointer-events:none}
.modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#4a355655;backdrop-filter:blur(3px);pointer-events:auto;animation:fade .2s;padding:16px}
.sheet{width:100%;max-width:420px;max-height:92%;overflow-y:auto;background:linear-gradient(180deg,#fff,#fff0f8);border:4px solid #fff;border-radius:30px;padding:18px;box-shadow:0 0 0 4px var(--pink2),0 20px 40px #4a355655;animation:popIn .3s cubic-bezier(.3,1.6,.5,1)}
.sheet h2{text-align:center}
.sheet .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:16px}
.sheet .btns{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.switch{width:56px;height:32px;border-radius:20px;background:#ddd;position:relative;transition:.2s;flex:0 0 auto}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 0 #0002;transition:.2s}
.switch.on{background:var(--mint)}.switch.on::after{left:27px}
input[type=range]{-webkit-appearance:none;appearance:none;width:140px;height:12px;border-radius:8px;background:linear-gradient(90deg,#ffd0e6,#e5dcff);border:2px solid var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ff9ac6 60%,#ff6fae);border:3px solid #fff;box-shadow:0 2px 0 #d4508c}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#ff7eb6;border:3px solid #fff}
.daily-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.day{border-radius:16px;background:#fff;border:3px solid var(--line);text-align:center;padding:6px 2px;font-size:12px}
.day b{display:block;font-size:15px;color:#e29a14}
.day.done{background:#eafff4;border-color:var(--mint)}
.day.today{border-color:var(--pink);animation:pulse 1s infinite}
.day.d7{grid-column:span 4;background:linear-gradient(90deg,#fff5cf,#ffe3f1)}

/* 상세 / 커스텀 */
.detail-img{width:170px;height:170px;margin:0 auto;display:block;animation:bob 2.6s ease-in-out infinite}
.stars{color:#ffb52e;letter-spacing:2px}
.cust-item{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--line);border-radius:20px;padding:8px;margin:8px 0}
.cust-item img{width:64px;height:64px;object-fit:contain}
.cust-item .meta{flex:1;min-width:0}.cust-item .meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cust-item .meta span{font-size:12px;color:var(--ink2)}
.crop-wrap{display:flex;justify-content:center;margin:6px 0}
#crop-canvas{width:280px;height:280px;border-radius:20px;background:#f3e9f7 repeating-conic-gradient(#fff 0 25%,#f0e4f5 0 50%) 50%/20px 20px;border:3px solid var(--line);touch-action:none}
.field{margin:8px 0}
.field label{display:block;font-size:13px;color:var(--ink2);margin-bottom:3px}
.field input[type=text]{width:100%;padding:9px 12px;border-radius:14px;border:3px solid var(--line);font:inherit;font-size:16px;background:#fff;color:var(--ink);-webkit-user-select:text;user-select:text}
.prev{display:flex;gap:12px;align-items:center;justify-content:center}
.prev img{width:96px;height:96px;object-fit:contain}

/* 미니게임 */
.mini-card{display:flex;gap:12px;align-items:center;background:#fff;border:3px solid var(--line);border-radius:22px;padding:12px;margin:8px 0;box-shadow:0 4px 0 #f0d3e5}
.mini-card .ico{font-size:40px;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#ffe3f0,#e5dcff)}
.mini-card .meta{flex:1;min-width:0}.mini-card .meta b{font-size:17px}.mini-card .meta p{margin:2px 0;font-size:13px;color:var(--ink2)}
.mini-card .st{font-size:12px;color:#3aa07e}
.mini-card .btn{min-height:42px;padding:6px 16px;font-size:16px}
#mini-play{position:absolute;inset:0;z-index:8;background:linear-gradient(180deg,#fff0f8,#e7f7ff);display:flex;flex-direction:column}
#mini-play[hidden]{display:none}
.mg-bar{display:flex;align-items:center;gap:10px;padding:8px 12px}
.mg-bar b{flex:1;text-align:center;font-size:18px}
#mg-score{min-width:70px;text-align:right;font-size:18px}
#mg-wrap{flex:1;min-height:0;position:relative;touch-action:none}
#mg-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#mg-result{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#4a355644;z-index:2}
#mg-result[hidden]{display:none}
#mg-result .sheet{text-align:center}
.big-n{font-size:46px;color:#ff9a1f;text-shadow:0 3px 0 #ffd27a}

/* 뽑기 연출 */
.pull-ov{position:absolute;inset:0;z-index:30;background:radial-gradient(circle at 50% 40%,#fff6fb,#e8dcff 70%,#c9b6ff);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;animation:fade .25s;pointer-events:auto}
.pull-ov canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.pull-ov .rays{position:absolute;left:50%;top:44%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,var(--rc,#fff7) 0 8deg,transparent 8deg 24deg);animation:spin 14s linear infinite;transition:opacity .5s;-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%)}
.pull-ov .rays.on{opacity:.75}
.pull-ov.myth .rays{background:repeating-conic-gradient(from 0deg,#ff9ee0aa 0 6deg,#9ee6ffaa 6deg 12deg,#fff3a0aa 12deg 18deg,transparent 18deg 24deg)}
.capsule{position:relative;width:150px;height:190px;z-index:2;transform-origin:50% 90%}
.capsule .top,.capsule .bot{position:absolute;left:0;right:0;border:5px solid #fff;box-shadow:0 0 0 3px var(--rc,#ccc),0 0 40px var(--rc,#ccc)}
.capsule .top{top:0;height:96px;border-radius:75px 75px 12px 12px;background:radial-gradient(circle at 35% 30%,#fff9 0 14%,transparent 15%),linear-gradient(180deg,var(--rc,#ff9ec7),#fff);transition:transform .5s}
.capsule .bot{bottom:0;height:98px;border-radius:12px 12px 75px 75px;background:linear-gradient(180deg,#fff,var(--rc,#ff9ec7))}
.capsule.shake{animation:rumble .22s infinite}
.capsule.open .top{transform:translateY(-120px) rotate(-25deg);opacity:0;transition:.4s}
.capsule.open .bot{transform:translateY(120px) rotate(18deg);opacity:0;transition:.4s}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
.flash.go{animation:flash .7s}
.pull-msg{z-index:4;margin-top:22px;font-size:20px;color:var(--ink);min-height:30px;text-align:center}
.reveal{position:relative;z-index:4;text-align:center;animation:revealIn .6s cubic-bezier(.2,1.8,.4,1)}
.reveal img{width:min(62vw,230px);height:min(62vw,230px);object-fit:contain;filter:drop-shadow(0 0 22px var(--rc))}
.reveal .rname{font-size:30px;margin-top:2px;text-shadow:0 3px 0 #fff,0 0 14px var(--rc)}
.reveal .rbadge{display:inline-block;color:#fff;background:var(--rc);padding:2px 16px;border-radius:999px;font-size:18px;box-shadow:0 3px 0 #0002;margin-bottom:4px}
.reveal .rnote{margin-top:6px;font-size:16px;background:#fffc;border-radius:14px;padding:4px 12px;display:inline-block}
.reveal.legend img{animation:bob 1.6s ease-in-out infinite}
.pull-grid{z-index:4;display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:0 12px;width:100%;max-width:520px}
.pcard{background:#fff;border:3px solid var(--rc);border-radius:16px;padding:3px;text-align:center;font-size:10px;position:relative;opacity:0;transform:scale(.3) rotate(-10deg);box-shadow:0 0 14px var(--rc)}
.pcard.in{animation:cardIn .45s forwards cubic-bezier(.2,1.7,.4,1)}
.pcard img{width:100%;aspect-ratio:1;object-fit:contain;display:block}
.pcard .t{line-height:1.1;display:block;word-break:keep-all;min-height:22px}
.pcard .nw{position:absolute;top:-8px;left:-6px;background:#ff4f7d;color:#fff;border-radius:8px;padding:0 5px;font-size:10px;transform:rotate(-8deg);z-index:2}
.pcard.big{background:linear-gradient(180deg,#fff,#fff3c8)}
.pull-actions{z-index:5;display:flex;gap:10px;margin-top:14px}
.skip{position:absolute;right:12px;top:calc(12px + var(--safe-t));z-index:7;background:#fffa;border-radius:999px;padding:4px 14px;font-size:14px}
#toast{position:absolute;left:50%;bottom:90px;transform:translate(-50%,20px);background:#4a3556ee;color:#fff;padding:9px 18px;border-radius:999px;font-size:15px;opacity:0;pointer-events:none;transition:.25s;z-index:50;white-space:nowrap;max-width:92%}
#toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes pop{50%{transform:scale(1.18)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes floatUp{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}100%{transform:translate(calc(-50% + var(--dx)),-80px) scale(1);opacity:0}}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes fade{from{opacity:0}}
@keyframes popIn{from{transform:scale(.6);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rumble{0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(-4px,2px) rotate(5deg)}50%{transform:translate(4px,-2px) rotate(-5deg)}75%{transform:translate(-3px,0) rotate(6deg)}100%{transform:translate(0,0) rotate(-6deg)}}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes revealIn{from{transform:scale(.1) rotate(-20deg);opacity:0}}
@keyframes cardIn{to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes pulse{50%{transform:scale(1.06)}}
@media (min-width:700px){#app{border-left:4px solid #fff;border-right:4px solid #fff}}
@media (prefers-reduced-motion:reduce){.machine,.detail-img{animation:none}}