/* buttons */
.big{border:none; border-radius:22px; padding:12px 26px; font-size:22px; font-weight:800; color:#fff; background:var(--gum); box-shadow:0 6px 0 var(--gumd); transition:transform .1s, box-shadow .1s}
.big:active{transform:translateY(5px); box-shadow:0 1px 0 var(--gumd)}
.big:disabled{opacity:.45; cursor:default}
.big.mint{background:#55cfa8; box-shadow:0 6px 0 #2f9d7c}
.big.sky{background:#57b4f2; box-shadow:0 6px 0 #2f84c0}
.big.soft{background:var(--card); color:var(--ink); box-shadow:0 6px 0 var(--line); border:3px solid var(--line)}
.row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center}

/* guide bubble */
.guide{display:flex; gap:12px; align-items:center; margin:4px 0 clamp(6px,1.6vh,14px)}
.guide img{width:clamp(44px,9vh,76px); height:clamp(44px,9vh,76px); border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 0 0 3px var(--gum); flex:none; background:#fff}
.bubble{position:relative; background:var(--card); border:3px solid var(--line); border-radius:22px; padding:10px 16px; font-size:19px; font-weight:600}
.bubble b{font-weight:800}
.bubble::before{content:""; position:absolute; left:-12px; top:50%; margin-top:-9px; border:9px solid transparent; border-right:12px solid var(--line); border-left:0}

/* welcome */
.welcome{position:fixed; inset:0; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; padding:20px 14px calc(30px + env(safe-area-inset-bottom,0px)); background:#bfe6ff center/cover no-repeat}
.wcard{transform-origin:50% 100%; background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(6px); border-radius:30px; padding:20px 22px 26px; max-width:520px; width:100%; border:4px solid #fff; box-shadow:0 10px 30px rgba(80,20,60,.25)}
.wtitle{font-size:clamp(38px,9vw,60px); font-weight:800; line-height:.95; margin:0 0 6px; color:var(--cane); text-shadow:0 3px 0 #fff, 0 6px 0 var(--gum); letter-spacing:-.5px}
.wcard input{width:100%; font:inherit; font-size:22px; font-weight:700; padding:12px 16px; border-radius:18px; border:3px solid var(--gum); background:var(--frost); color:var(--ink); margin:6px 0 16px; user-select:text}
label.lbl{font-weight:700; color:var(--ink2)}

/* lists */
h2{font-size:30px; margin:6px 0 4px; line-height:1.1}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
.card{background:var(--card); border:3px solid var(--line); border-radius:24px; padding:14px; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center}
.card .ico{font-size:52px; line-height:1.1}
.card .ico svg{width:72px; height:72px}
.card h3{margin:0; font-size:21px; line-height:1.1}
.card p{margin:0; color:var(--ink2); font-weight:600; font-size:16px}
.card.locked{opacity:.75}
.card.owned{border-color:#7fdcb9}
.card .big{font-size:18px; padding:8px 18px}
.factory{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; background:var(--frost2); border-radius:24px; padding:14px; margin:8px 0 14px; font-size:44px; min-height:80px; align-items:center}
.factory small{font-size:16px; font-weight:700; color:var(--ink2)}

/* modal + fx */
.modal{position:fixed; inset:0; z-index:200; background:rgba(60,20,50,.45); display:flex; align-items:center; justify-content:center; padding:20px}
.mbox{transform-origin:50% 50%; background:var(--card); border-radius:30px; padding:22px; max-width:420px; width:100%; text-align:center; border:4px solid #fff; animation:popin .4s cubic-bezier(.3,1.6,.6,1)}
.mbox h2{color:var(--cane)}
.mbox .candybox{width:min(200px,26vh); margin:0 auto}
.confetti{position:fixed; z-index:300; top:-20px; width:10px; height:16px; border-radius:3px; pointer-events:none; animation:conf 1.6s linear forwards}
@keyframes conf{to{transform:translateY(110vh) rotate(720deg)}}
.floaty{position:fixed; z-index:300; pointer-events:none; font-weight:800; font-size:30px; color:#c98a00; text-shadow:0 2px 0 #fff; animation:floaty 1.1s ease-out forwards}
@keyframes floaty{to{transform:translateY(-90px); opacity:0}}
.hidden{display:none!important}