/* style.css — 👑 공주님 옷입히기 */

*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-touch-callout:none;}
html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,'Helvetica Neue','Noto Sans KR',sans-serif;touch-action:manipulation;}
body{background:#FCE4EC;}

/* ---- Canvas ---- */
#gameCanvas{position:fixed;top:0;left:0;width:100%;height:100%;touch-action:none;cursor:pointer;z-index:1;}

/* ---- HUD ---- */
#hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:6px 10px;z-index:10;pointer-events:none;}
#hud>*{pointer-events:auto;}
.hudItem{background:rgba(255,255,255,.9);border-radius:20px;padding:4px 11px;box-shadow:0 1px 5px rgba(0,0,0,.07);font-weight:800;font-size:.85rem;display:flex;align-items:center;gap:3px;}

/* BGM 토글 */
#bgmBtn{background:rgba(255,255,255,.9);border:none;border-radius:50%;width:34px;height:34px;font-size:1.1rem;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;transition:transform .12s;}
#bgmBtn:active{transform:scale(.85);}

/* ---- 하단 툴바 ---- */
#toolbar{position:fixed;bottom:10px;left:0;right:0;z-index:10;display:flex;flex-direction:column;gap:5px;padding:0 6px;pointer-events:none;}
#toolbar>*{pointer-events:auto;}

/* 데코 버튼 */
.decoBtn{width:44px;height:44px;min-width:44px;border-radius:50%;border:3px solid #E0E0E0;font-size:1.3rem;cursor:pointer;transition:transform .1s,border-color .15s,box-shadow .15s;background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.decoBtn:active{transform:scale(.82);}
.decoBtn.sel{border-color:#FFD700;background:#FFF9C4;box-shadow:0 2px 10px rgba(255,215,0,.5);transform:scale(1.08);}
.creamBtn.sel{box-shadow:0 2px 12px rgba(255,215,0,.6);}

/* 카테고리 버튼 */
.catBtn{font-size:.85rem;padding:7px 13px;border-radius:20px;}
.catBtn:active{transform:scale(.92)!important;}

/* 액션 버튼 */
.toolBtn{padding:9px 18px;border-radius:22px;border:none;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.1);transition:transform .12s,box-shadow .12s;white-space:nowrap;}
.toolBtn:active{transform:scale(.9);box-shadow:0 1px 4px rgba(0,0,0,.15);}

/* 스크롤 가능한 데코 행 */
.decoRow{display:flex;gap:5px;overflow-x:auto;padding:0 4px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.decoRow::-webkit-scrollbar{display:none;}

/* ---- 메시지 박스 ---- */
#msgBox{position:fixed;top:44%;left:50%;transform:translate(-50%,-50%);z-index:20;pointer-events:none;text-align:center;transition:opacity .3s;}
#msgText{font-size:2.2rem;font-weight:900;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.2),0 6px 14px rgba(0,0,0,.15);}
#msgSub{font-size:1rem;color:rgba(255,255,255,.93);text-shadow:0 1px 4px rgba(0,0,0,.25);margin-top:2px;}
.hidden{opacity:0!important;pointer-events:none!important;}

/* ---- 축하 오버레이 ---- */
#celeb{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;display:none;justify-content:center;align-items:center;pointer-events:none;background:rgba(0,0,0,.25);}
#celeb.on{display:flex;animation:fadeIn .4s ease-out;}
#celebT{font-size:3.6rem;font-weight:900;color:#FFD700;text-shadow:0 4px 0 #DAA520;text-align:center;animation:bounce .6s ease-in-out infinite alternate;}
#celebS{font-size:1.2rem;color:#fff;display:block;margin-top:4px;text-shadow:0 2px 6px rgba(0,0,0,.2);}

/* ---- 파티클 ---- */
.particle{position:fixed;pointer-events:none;z-index:60;animation:flyUp .8s ease-out forwards;font-size:1.3rem;}
@keyframes flyUp{0%{opacity:1;transform:translate(0,0)scale(1);}100%{opacity:0;transform:translate(var(--dx),var(--dy))scale(0);}}
@keyframes fadeIn{0%{transform:scale(.3);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes bounce{0%{transform:rotate(-3deg)scale(1);}100%{transform:rotate(3deg)scale(1.08);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}

/* ---- 주문 알림 ---- */
#orderHint{text-align:center;color:#9C27B0;font-weight:800;font-size:1rem;padding:4px 8px;text-shadow:0 1px 2px rgba(255,255,255,.8);pointer-events:none;background:rgba(255,255,255,.7);border-radius:14px;margin-top:2px;}

/* ---- 반응형 (작은 화면) ---- */
@media(max-width:480px){
  .decoBtn{width:38px;height:38px;min-width:38px;font-size:1.1rem;}
  .toolBtn{padding:7px 14px;font-size:.9rem;}
  #celebT{font-size:2.6rem;}
  .hudItem{font-size:.7rem;padding:3px 7px;}
  #orderHint{font-size:.85rem;}
}