:root{
  --pink:#ff7eb6; --pink2:#ffb8d9; --mint:#5fe0c0; --sky:#7cc4ff; --lemon:#ffe066;
  --ink:#4a2f5c; --card:#ffffffee; --shadow:0 6px 0 rgba(120,60,140,.25);
  --font:"Jua","Poor Story","Gothic A1","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font);color:var(--ink);
  background:linear-gradient(160deg,#ffe3f1 0%,#e3f0ff 50%,#e8ffef 100%);user-select:none;-webkit-user-select:none}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(#fff 2px,transparent 2.5px);background-size:28px 28px}
#app{position:relative;height:100%;max-width:820px;margin:0 auto}
.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom)}
.screen.active{display:flex}
.hidden{display:none!important}
button{font-family:inherit;color:inherit;cursor:pointer;border:none}

/* buttons */
.btn{font-size:22px;padding:14px 22px;border-radius:22px;background:#fff;box-shadow:var(--shadow);transition:transform .08s;min-width:200px;font-weight:700}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(120,60,140,.25)}
.btn-main{background:linear-gradient(180deg,#ff9cc8,#ff6fa8);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn-shop{background:linear-gradient(180deg,#8fe9d2,#43cfa9);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn-rec{background:linear-gradient(180deg,#9fd3ff,#62a8f5);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn-mini{font-size:15px;padding:8px 12px;border-radius:14px;background:#fff;box-shadow:0 3px 0 rgba(120,60,140,.2)}
.btn-icon{font-size:22px;width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:0 3px 0 rgba(120,60,140,.2)}
.coin-badge{display:inline-flex;align-items:center;gap:4px;background:#fff6c9;border:2px solid #ffd54a;border-radius:999px;padding:3px 12px;font-size:18px;box-shadow:0 3px 0 rgba(200,150,0,.25)}
.coin-badge.big{font-size:26px;padding:6px 20px}
.coin-badge b{color:#b77900}

/* menu */
.menu-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:auto;padding:12px 0}
.logo{text-align:center}
.logo canvas{width:320px;height:90px;max-width:90vw}
.logo h1{margin:0;font-size:46px;line-height:1.05;color:#ff5fa2;text-shadow:3px 3px 0 #fff,6px 6px 0 rgba(255,95,162,.25);letter-spacing:2px}
.logo h1 span{color:#3fbf9b;font-size:54px}
.logo .sub{margin:6px 0 0;font-size:16px;opacity:.85}
.menu-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}
.menu-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.seg{display:flex;background:#fff;border-radius:14px;padding:3px;box-shadow:0 3px 0 rgba(120,60,140,.2)}
.seg button{background:none;padding:7px 10px;border-radius:11px;font-size:15px}
.seg button.on{background:var(--pink);color:#fff}
.menu-char{display:flex;align-items:center;gap:10px;background:#ffffffcc;border-radius:18px;padding:6px 14px 6px 6px;font-size:15px}
.menu-char .pt{font-size:30px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* game */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0 6px}
.topbar .title{margin:0;font-size:26px}
.top-stats{display:flex;gap:10px;align-items:center;font-size:18px}
.top-stats b{font-size:20px}
.game-main{flex:1;min-height:0;display:flex;justify-content:center;align-items:stretch;gap:8px}
.side{display:flex;flex-direction:column;gap:8px;width:110px;flex:0 0 auto}
.panel{background:var(--card);border-radius:16px;padding:6px;box-shadow:0 4px 0 rgba(120,60,140,.18);text-align:center}
.panel-title{font-size:16px;font-weight:700;margin-bottom:2px}
.bag-panel{border:3px dashed #ffb0d4;transition:transform .15s}
.bag-panel.used{opacity:.55}
.bag-panel.bump{transform:scale(1.08)}
.bag-hint{font-size:11px;opacity:.6}
#bag-canvas,#next-canvas{width:48px;height:96px;display:block;margin:0 auto}
#next2-canvas{width:34px;height:68px;display:block;margin:4px auto 0;opacity:.8}
.char-panel .portrait{font-size:40px;width:64px;height:64px;margin:2px auto;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.char-panel .portrait.skill{animation:skillPulse .6s ease}
@keyframes skillPulse{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1)}}
.char-name{font-weight:700;font-size:15px}
.char-skill{font-size:12px;line-height:1.25;opacity:.85}
.stat-panel{display:flex;flex-direction:column;gap:2px}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:2px 6px}
.stat small{font-size:13px;opacity:.7}.stat b{font-size:20px}
.board-wrap{position:relative;flex:0 0 auto;align-self:center;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 4px #fff,0 0 0 8px var(--pink2),0 10px 20px rgba(120,60,140,.25)}
#board{display:block;width:100%;height:100%}
.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.board-overlay{position:absolute;inset:0;background:rgba(255,240,250,.75);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.overlay-box{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.overlay-box .btn{min-width:150px;font-size:18px}
.overlay-box.over h2{font-size:36px;color:#ff5fa2;animation:overDrop .6s cubic-bezier(.3,1.6,.6,1)}
@keyframes overDrop{from{transform:translateY(-120px) scale(.5);opacity:0}to{transform:none;opacity:1}}

.chain-text{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:40px;font-weight:900;white-space:nowrap;
  color:#fff;-webkit-text-stroke:2px #ff4f9a;text-shadow:0 4px 0 #ff4f9a,0 0 18px #fff;animation:chainPop 1.1s ease-out forwards}
.chain-text.big{font-size:52px;-webkit-text-stroke:2px #ff8a00;text-shadow:0 4px 0 #ff8a00,0 0 24px #fff59d}
@keyframes chainPop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-12deg);opacity:0}
  25%{transform:translate(-50%,-50%) scale(1.35) rotate(4deg);opacity:1}
  45%{transform:translate(-50%,-50%) scale(1)}
  80%{opacity:1}100%{transform:translate(-50%,-90%) scale(1);opacity:0}}
.coin-pop{position:absolute;transform:translate(-50%,-50%);font-size:20px;font-weight:900;color:#b77900;white-space:nowrap;
  background:#fff6c9;border:2px solid #ffd54a;border-radius:999px;padding:1px 8px;animation:coinUp 1.2s ease-out forwards}
.coin-pop.skill{background:#ffe0f0;border-color:#ff7eb6;color:#d6327c}
@keyframes coinUp{0%{transform:translate(-50%,-30%) scale(.5);opacity:0}20%{transform:translate(-50%,-60%) scale(1.15);opacity:1}
  100%{transform:translate(-50%,-260%) scale(1);opacity:0}}
.skill-text{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:16px;font-weight:700;color:#fff;background:#ff7eb6;border-radius:12px;padding:3px 10px;white-space:nowrap;animation:coinUp 1.3s ease-out forwards}

/* controls */
.controls{display:flex;flex-direction:column;gap:6px;padding:8px 0 6px}
.ctrl-row{display:flex;gap:6px;justify-content:center}
.cbtn{flex:1;max-width:120px;height:54px;border-radius:16px;font-size:26px;background:#fff;box-shadow:0 4px 0 rgba(120,60,140,.22);touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cbtn small{font-size:12px;margin-top:2px}
.cbtn.pressed,.cbtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,60,140,.22)}
.cbtn-bag{background:#ffe3f1}.cbtn-hard{background:#fff3c4}.cbtn-rot{background:#dff7ef}.cbtn-move{background:#e3f0ff}
@media (hover:hover) and (pointer:fine){ .controls{opacity:.85} .cbtn{height:46px} }

/* shop */
.tabs{display:flex;gap:8px;justify-content:center;margin:4px 0 10px}
.tab{font-size:18px;padding:9px 18px;border-radius:16px;background:#ffffffaa}
.tab.active{background:var(--pink);color:#fff;box-shadow:0 4px 0 rgba(200,60,120,.3)}
.shop-list{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:4px 2px 20px;align-content:start}
.item{background:var(--card);border-radius:20px;padding:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:3px solid transparent}
.item.equipped{border-color:#ff7eb6}
.item canvas{width:120px;height:72px}
.item .big-emoji{font-size:52px;width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.item h3{margin:0;font-size:19px}
.item p{margin:0;font-size:14px;opacity:.85;min-height:36px}
.item .btn-buy{width:100%;font-size:17px;padding:9px;border-radius:14px;font-weight:700;background:linear-gradient(180deg,#ffe57a,#ffc928);box-shadow:0 3px 0 rgba(200,150,0,.35)}
.item .btn-buy.poor{background:#eee;color:#999;box-shadow:none}
.item .btn-equip{width:100%;font-size:17px;padding:9px;border-radius:14px;background:linear-gradient(180deg,#8fe9d2,#43cfa9);color:#fff}
.item .btn-unequip{width:100%;font-size:17px;padding:9px;border-radius:14px;background:#ffe3f1;color:#d6327c}
.tag{font-size:12px;background:#ff7eb6;color:#fff;border-radius:8px;padding:1px 8px}

/* records */
.records{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rec-box{background:var(--card);border-radius:18px;padding:12px;text-align:center;box-shadow:var(--shadow)}
.rec-box small{display:block;opacity:.7}.rec-box b{font-size:26px}
.rank{background:var(--card);border-radius:18px;padding:10px 14px;box-shadow:var(--shadow)}
.rank h3{margin:4px 0 8px}
.rank ol{margin:0;padding-left:28px}.rank li{padding:4px 0;font-size:17px;border-bottom:1px dashed #f2c8dc}
.rank li span{opacity:.65;font-size:14px;margin-left:6px}

/* result */
.result-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.result-title{font-size:38px;margin:0;color:#ff5fa2;text-shadow:3px 3px 0 #fff}
.result-card{background:var(--card);border-radius:22px;padding:14px 22px;min-width:270px;box-shadow:var(--shadow)}
.rrow{display:flex;justify-content:space-between;font-size:20px;padding:6px 0;border-bottom:1px dashed #f2c8dc}
.rrow:last-child{border:none}.rrow b{font-size:24px}.rrow.coin b{color:#b77900}
.new-record{font-size:24px;color:#ff8a00;animation:skillPulse 1s infinite}

/* modal & toast */
.modal{position:fixed;inset:0;background:rgba(80,40,90,.35);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-box{background:#fff;border-radius:24px;padding:18px 22px;max-width:420px;box-shadow:0 10px 30px rgba(0,0,0,.2);text-align:center}
.help{text-align:left;padding-left:18px;line-height:1.9;font-size:16px}
kbd{background:#f3e8ff;border-radius:6px;padding:1px 6px;border:1px solid #d9c2f5;font-family:inherit}
.help-tip{font-size:15px;background:#fff6c9;border-radius:14px;padding:8px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#4a2f5c;color:#fff;padding:10px 18px;border-radius:999px;font-size:17px;z-index:60;white-space:nowrap;animation:toastIn .25s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}}

@media (max-width:520px){
  .side{width:80px}
  .panel-title{font-size:13px}
  .char-panel .portrait{width:46px;height:46px;font-size:28px}
  .char-skill{font-size:10.5px}
  .char-name{font-size:13px}
  .stat b{font-size:16px}.stat small{font-size:11px}
  .top-stats{font-size:15px}
  .logo h1{font-size:38px}.logo h1 span{font-size:44px}
  .chain-text{font-size:30px}.chain-text.big{font-size:38px}
  .coin-pop{font-size:15px}
}

/* ===== v2: 보석, 아이템, 서포트, 미니게임 ===== */
.wallet{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.wallet.small{gap:4px}
.gem-badge{display:inline-flex;align-items:center;gap:4px;background:#e9f6ff;border:2px solid #7cc4ff;border-radius:999px;padding:3px 12px;font-size:18px;box-shadow:0 3px 0 rgba(40,120,200,.25)}
.gem-badge b{color:#2a78c9}
.gem-badge.big{font-size:26px;padding:6px 20px}
.btn-mg{background:linear-gradient(180deg,#d7b8ff,#a777f5);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn-mg small{font-size:14px;opacity:.9}
.sup-panel{background:#fffbe9;padding:4px}
.sup-portrait{font-size:30px;width:46px;height:46px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.sup-portrait.act{animation:supHop .7s ease}
@keyframes supHop{0%{transform:none}30%{transform:translateY(-12px) rotate(-10deg) scale(1.2)}60%{transform:translateY(0) rotate(8deg)}100%{transform:none}}
.sup-name{font-size:13px;font-weight:700}
.sup-status{font-size:11px;opacity:.75;line-height:1.2}
.sup-text{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:16px;font-weight:700;color:#7a4b00;background:#fff3c4;border:2px solid #ffcf33;border-radius:14px;padding:3px 10px;white-space:nowrap;animation:coinUp 1.4s ease-out forwards}
.item-text{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:26px;font-weight:900;color:#fff;-webkit-text-stroke:1.5px #8a4dff;text-shadow:0 3px 0 #8a4dff;white-space:nowrap;animation:chainPop 1.1s ease-out forwards}
.status-chips{position:absolute;left:6px;top:6px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.chip{background:#ffffffdd;border-radius:999px;padding:2px 8px;font-size:13px;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.1)}
.itembar{display:flex;gap:5px;justify-content:center;align-items:center;padding-top:6px;flex-wrap:nowrap}
.ibtn{position:relative;width:46px;height:42px;border-radius:12px;background:#fff;font-size:22px;box-shadow:0 3px 0 rgba(120,60,140,.22);touch-action:manipulation}
.ibtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(120,60,140,.22)}
.ibtn.empty{opacity:.35;filter:grayscale(.8)}
.ibtn.passive{background:#f1f9ff}
.ibtn .cnt{position:absolute;right:-3px;bottom:-4px;background:#ff7eb6;color:#fff;font-size:11px;border-radius:999px;min-width:17px;padding:0 4px;line-height:17px}
.ibtn .key{position:absolute;left:3px;top:1px;font-size:9px;opacity:.55}
.ibtn.flash{animation:skillPulse .5s}
.ilimit{font-size:12px;opacity:.75;margin-left:2px;white-space:nowrap}
.item .own{font-size:14px;font-weight:700;color:#d6327c}
.item .btn-buy.gem{background:linear-gradient(180deg,#bfe3ff,#7cc4ff)}
.tabs{flex-wrap:wrap}
.tab{font-size:16px;padding:8px 12px}
/* mini hub */
.hub-sub{text-align:center;margin:4px 8px 12px;font-size:16px}
.hub-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:4px}
.hub-card{background:var(--card);border-radius:22px;padding:16px;box-shadow:var(--shadow);text-align:center;border:3px solid #e6d1ff}
.hub-card:active{transform:translateY(3px)}
.hub-emoji{font-size:54px}.hub-card h3{margin:4px 0;font-size:24px}.hub-card p{margin:4px 0 8px;font-size:15px;opacity:.85}
.hub-left{display:inline-block;background:#e9f6ff;border-radius:999px;padding:3px 12px;font-size:14px;font-weight:700;color:#2a78c9}
.hub-left.done{background:#eee;color:#888}
.mini-score{font-size:18px;background:#fff;border-radius:999px;padding:4px 12px}
.timebar{height:12px;background:#ffffff99;border-radius:999px;overflow:hidden;margin:4px 6px 8px}
.timebar>div{height:100%;width:100%;background:linear-gradient(90deg,#5fe0c0,#ffd23f,#ff7eb6);transition:width .1s linear}
.tap-target{display:flex;align-items:center;justify-content:center;gap:12px;font-size:20px;font-weight:700}
.tap-target canvas{width:64px;height:64px}
.tap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:360px;width:100%;margin:10px auto;padding:0 8px}
.tap-cell{position:relative;aspect-ratio:1;background:#fff;border-radius:22px;box-shadow:0 4px 0 rgba(120,60,140,.2);display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.tap-cell canvas{width:80%;height:80%}
.tap-cell .num{position:absolute;left:8px;top:4px;font-size:12px;opacity:.4}
.tap-cell.good{animation:skillPulse .3s}
.tap-cell.bad{animation:shake .3s;background:#ffd6dc}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:400px;width:100%;margin:6px auto;padding:0 8px}
.mem-card{aspect-ratio:3/4;border-radius:16px;font-size:38px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#ff9cc8,#b28bff);color:#fff;box-shadow:0 4px 0 rgba(120,60,140,.22);touch-action:manipulation}
.mem-card.open,.mem-card.done{background:#fff;animation:flipIn .22s ease-out}
@keyframes flipIn{from{transform:scaleX(.1)}to{transform:scaleX(1)}}
.mem-card.done{opacity:.6;box-shadow:none}
.mem-card.cursor{outline:4px solid #ffcf33;outline-offset:2px}
.mini-hint{text-align:center;font-size:13px;opacity:.6;margin-top:4px}
.mini-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,240,250,.85);z-index:5;padding:16px}
.mini-overlay:empty{display:none}
.mini-box{background:#fff;border-radius:24px;padding:18px 22px;text-align:center;box-shadow:var(--shadow);max-width:340px}
.mini-box h2{margin:0 0 6px;color:#ff5fa2}
.mini-box .gems-won{font-size:34px;font-weight:900;color:#2a78c9;margin:8px 0}
.mini-box .btn{min-width:180px;margin-top:8px;font-size:19px}
@media (max-width:520px){ .ibtn{width:40px;height:38px;font-size:19px} .sup-portrait{width:38px;height:38px;font-size:24px} .gem-badge{font-size:15px;padding:2px 8px} .top-stats .coin-badge{font-size:15px;padding:2px 8px} .top-stats{gap:6px} }