*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;background:#f9f3d8;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",sans-serif;
    color:#3d5730;user-select:none;-webkit-user-select:none;touch-action:none;
    display:flex;align-items:center;justify-content:center;
  }
  #app{position:relative;width:100%;height:100%;max-width:520px;max-height:100dvh;overflow:hidden;background:#f9f3d8;}
  canvas{display:block;width:100%;height:100%;}

  #hud{position:absolute;inset:0;pointer-events:none;padding:calc(env(safe-area-inset-top) + 12px) 12px 0;}
  .hud-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
  .pill{display:flex;align-items:center;gap:7px;background:#fffdf5;border:3px solid #fff;border-radius:999px;
    padding:5px 14px 5px 6px;box-shadow:0 4px 0 rgba(120,140,90,.3),0 8px 18px rgba(90,110,60,.18);}
  .pill .cap{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;flex:none;}
  .pill .num{font-size:17px;font-weight:900;color:#4a6b34;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
  .pill.sm .num{font-size:14px;}
  .col{display:flex;flex-direction:column;gap:7px;}
  .col.right{align-items:flex-end;}to{opacity:1;transform:none}}}

  #botStack{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 18px);
    display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
  #combo{align-self:center;flex:none;width:max-content;max-width:70%;
    background:#ff8fc4;border:2px solid #fff;border-radius:999px;padding:2px 11px;font-size:10px;font-weight:900;
    color:#fff;white-space:nowrap;box-shadow:0 2px 0 rgba(190,70,130,.35);opacity:0;transform:scale(.85);
    transition:opacity .18s,transform .18s;letter-spacing:.02em;}
  /* 사용 중인 아이템 — 뭘 쓰고 있는지만 (남은 시간은 표시하지 않는다) */
  #buffs{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;}
  .buff{display:flex;align-items:center;gap:5px;flex:none;
    background:#fffdf5;border:2.5px solid #fff;border-radius:999px;padding:3px 11px 3px 4px;
    box-shadow:0 3px 0 rgba(120,140,90,.28);
    animation:buffIn .22s cubic-bezier(.34,1.56,.64,1);}
  .buff .bi{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;}
  .buff .bt{font-size:11px;font-weight:900;color:#4a6b34;white-space:nowrap;}
  @keyframes buffIn{from{opacity:0;transform:translateY(8px) scale(.8)}to{opacity:1;transform:none}}
  #combo.on{opacity:1;transform:scale(1);}
  #ctrlHint span{display:inline-block;background:rgba(255,253,245,.92);border:3px solid #fff;border-radius:999px;
    padding:6px 14px;font-size:10.5px;font-weight:900;color:#7f9a6c;box-shadow:0 4px 0 rgba(120,140,90,.24);}
  #ctrlHint{transition:opacity .4s;}

  #penalty{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none;}
  #penalty.show{animation:penPop 1.1s ease-out forwards;}
  #penalty img{display:none;width:118px;height:auto;margin:0 auto 2px;
    filter:drop-shadow(0 5px 10px rgba(70,90,40,.32));}
  #penalty img.on{display:block;}
  #penalty .big{font-size:38px;font-weight:900;color:#fff;letter-spacing:-.03em;-webkit-text-stroke:5px #ff6b81;paint-order:stroke fill;}
  #penalty .sub{font-size:11px;font-weight:900;color:#fff;letter-spacing:.06em;margin-top:3px;background:#ff6b81;
    display:inline-block;padding:4px 12px;border-radius:999px;border:2.5px solid #fff;}
  @keyframes penPop{0%{opacity:0;transform:translate(-50%,-25%) scale(.6)}
    16%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
    28%{transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}

  #turnWarn{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.9);
    background:#ffa725;color:#fff;border:3px solid #fff;border-radius:999px;padding:7px 20px;
    font-size:14px;font-weight:900;white-space:nowrap;opacity:0;transition:opacity .1s,transform .1s;
    box-shadow:0 4px 0 rgba(190,120,20,.4);}
  #turnWarn.on{opacity:1;transform:translate(-50%,-50%) scale(1);}

  .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:20px 18px calc(env(safe-area-inset-bottom) + 20px);text-align:center;
    background:rgba(120,150,90,.3);backdrop-filter:blur(2px);z-index:5;overflow:auto;}
  .overlay.hidden{display:none;}
  .card{width:100%;max-width:352px;background:#fffdf3;border:5px solid #fff;border-radius:30px;
    padding:18px 18px 22px;box-shadow:0 10px 0 rgba(150,165,120,.4),0 18px 40px rgba(90,110,60,.25);}
  .logo{display:block;width:100%;max-width:284px;height:auto;margin:2px auto 0;
    filter:drop-shadow(0 5px 8px rgba(120,140,90,.28));animation:bob 2.6s ease-in-out infinite;}
  .hero{display:block;width:110px;height:110px;object-fit:contain;margin:-4px auto 0;
    filter:drop-shadow(0 6px 8px rgba(120,140,90,.25));animation:bob 2.2s ease-in-out infinite;}
  /* 결과 화면 표정은 세로로 긴 그림이라 더 크게 */
  #oHero{width:128px;height:138px;margin-top:-8px;}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .brand{display:inline-flex;align-items:center;gap:6px;background:#2f8bff;color:#fff;font-size:10px;font-weight:900;
    letter-spacing:.16em;padding:5px 13px;border-radius:999px;border:2.5px solid #fff;box-shadow:0 3px 0 rgba(20,80,180,.4);}
  .title{font-size:36px;font-weight:900;line-height:.95;letter-spacing:-.04em;margin-top:10px;color:#8ed12b;
    text-shadow:0 4px 0 #5cae1e,0 6px 12px rgba(90,140,30,.25);}
  .subtitle{font-size:12px;color:#7f9a6c;margin-top:9px;line-height:1.6;font-weight:700;}
  .rules{margin:14px 0 2px;display:flex;flex-direction:column;gap:8px;text-align:left;}
  .rule{display:flex;gap:10px;align-items:flex-start;background:#f2f9e6;border:2.5px solid #e2f0cf;border-radius:18px;padding:10px 12px;}
  .rule .em{font-size:21px;line-height:1.1;flex:none;}
  .rule b{font-size:12.5px;display:block;margin-bottom:2px;color:#4a6b34;}
  .rule span{font-size:10.5px;color:#83a06f;line-height:1.55;font-weight:600;}
  .rule.warn{background:#f4f6fb;border-color:#e0e6f0;} .rule.warn b{color:#7e93b5;}
  .rule.cool{background:#eaf6ff;border-color:#d0eaff;} .rule.cool b{color:#2f95d8;}
  .rule.key{background:#fff8e6;border-color:#ffe7b8;} .rule.key b{color:#e08a00;}
  .btn{margin-top:15px;padding:15px 44px;border:4px solid #fff;border-radius:999px;font-size:17px;font-weight:900;
    letter-spacing:.03em;color:#fff;cursor:pointer;pointer-events:auto;background:#5ec83c;
    box-shadow:0 6px 0 #3f9a24,0 12px 22px rgba(50,120,20,.3);}
  .btn:active{transform:translateY(4px);box-shadow:0 2px 0 #3f9a24;}
  .btn.blue{background:#2f8bff;box-shadow:0 6px 0 #1b62c4,0 12px 22px rgba(20,80,180,.3);}
  .btn.blue:active{box-shadow:0 2px 0 #1b62c4;}
  .hint{font-size:10.5px;color:#9bb387;margin-top:11px;line-height:1.6;font-weight:700;}
  .go-title{font-size:31px;font-weight:900;color:#7e93b5;letter-spacing:-.02em;text-shadow:0 4px 0 #5b6f8e;}
  .go-reason{font-size:11.5px;color:#9aa6b8;margin-top:8px;font-weight:800;}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px;}
  .stat{background:#f2f9e6;border:2.5px solid #e2f0cf;border-radius:18px;padding:10px 12px;text-align:left;}
  .stat .k{font-size:9px;letter-spacing:.12em;color:#9bb387;font-weight:900;}
  .stat .v{font-size:20px;font-weight:900;color:#4a6b34;font-variant-numeric:tabular-nums;margin-top:1px;}
  .stat.wide{grid-column:1/-1;} .stat.wide .v{font-size:28px;color:#ffa725;}
  .best{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 9px;
    background:#fff4d6;border:3px solid #ffd486;border-radius:18px;padding:9px 15px;
    font-size:22px;font-weight:900;color:#e08a00;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
    box-shadow:0 3px 0 rgba(200,150,50,.25);}
  .best:empty{display:none;}
  .shop{margin-top:11px;background:#f6f9ee;border:2.5px solid #e4eed4;border-radius:18px;padding:9px 10px 10px;}
  .shop-hd{display:flex;align-items:baseline;justify-content:center;gap:7px;margin-bottom:8px;}
  .shop-hd .wal{font-size:16px;font-weight:900;color:#4a6b34;font-variant-numeric:tabular-nums;}
  .shop-hd .wal-n{font-size:9.5px;font-weight:800;color:#9bb387;}
  .shop-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .buy{display:flex;flex-direction:column;align-items:center;gap:3px;
    background:#fff;border:2.5px solid #dbe8c8;border-radius:16px;
    padding:11px 8px 10px;font:inherit;cursor:pointer;transition:transform .1s,border-color .15s,background .15s;}
  .buy .ic{width:46px;height:46px;object-fit:contain;display:block;margin-bottom:2px;
    filter:drop-shadow(0 3px 4px rgba(120,140,90,.22));}
  .buy .nm{font-size:13px;font-weight:900;color:#4a6b34;line-height:1.2;}
  .buy .sub{font-size:9.5px;font-weight:900;color:#9bb387;line-height:1.2;white-space:nowrap;}
  .buy .pr{margin-top:3px;font-size:12.5px;font-weight:900;color:#ffa725;font-variant-numeric:tabular-nums;
    background:#fff7e6;border-radius:999px;padding:2px 10px;}
  .buy .pr::before{content:'🪙';font-size:10px;margin-right:3px;}
  .buy:active{transform:scale(.96);}
  .buy.on{background:#fff4d6;border-color:#ffc861;}
  .buy.on .pr{color:#2fb673;}
  .buy.no{opacity:.42;}
  .shop-sm{margin-top:10px;padding:8px 9px 9px;}
  .shop-sm .shop-hd{margin-bottom:6px;}
  .shop-sm .buy{padding:7px 8px;}
  .shop-sm .buy .nm{font-size:10px;}
  .btn.purple{background:#9b6ef3;box-shadow:0 5px 0 #6f43c8,0 12px 22px rgba(90,50,160,.28);}
  .btn.purple b{font-weight:900;}
  .btn.purple b::before{content:'🪙';font-size:12px;margin:0 2px 0 5px;}
  .btn.hidden{display:none;}
  .btn.teal{background:#2fb69e;box-shadow:0 5px 0 #1d8471,0 12px 22px rgba(20,110,95,.26);
    font-size:14px;padding:13px 20px;}
  /* 결과 화면 : 이어달리기 · 다시 달리기를 좌우로 */
  .btn-row{display:flex;gap:9px;justify-content:center;margin-top:15px;}
  .btn-row .btn{margin-top:0;flex:1 1 0;min-width:0;padding:14px 8px;font-size:14px;letter-spacing:0;}
  .btn-row .btn b{display:inline-block;}
  /* 아이템 선택 팝업 */
  .card.slim{max-width:320px;padding:20px 18px 22px;}
  .ask{font-size:17px;font-weight:900;color:#4a6b34;margin-bottom:5px;letter-spacing:-.01em;}
  .ask-sub{font-size:11px;font-weight:800;color:#9bb387;line-height:1.5;margin-bottom:12px;}
  .ask-sub b{color:#7f9a6c;font-weight:900;}
  .best .lb{font-size:10px;letter-spacing:.16em;color:#c9a05a;align-self:center;}
  .best .gap{font-size:11px;color:#b98a3a;font-weight:800;letter-spacing:0;flex-basis:100%;text-align:center;}
  .bestpill{transition:background .2s,border-color .2s;}
  .bestpill.rec{background:#ffd486;border-color:#fff3d2;animation:bestPulse .7s ease-in-out infinite;}
  .bestpill.rec .num{color:#8a5a00;}
  @keyframes bestPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
  .newbest{margin-top:12px;padding:9px 14px;border-radius:16px;background:#fff4d6;border:2.5px solid #ffd486;
    display:flex;flex-direction:column;gap:2px;align-items:center;animation:newPop .5s cubic-bezier(.2,1.5,.4,1) both;}
  .newbest b{font-size:15px;font-weight:900;color:#e08a00;letter-spacing:.02em;}
  .newbest span{font-size:10.5px;color:#b98a3a;font-weight:800;letter-spacing:.04em;}
  .newbest.hidden{display:none;}
  @keyframes newPop{0%{transform:scale(.6) translateY(8px);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
  .stat.wide.rec .v{color:#e08a00;animation:recPulse 1.1s ease-in-out 2;}
  @keyframes recPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
  .bag{margin-top:9px;font-size:10.5px;color:#83a06f;line-height:1.95;font-weight:800;}
  .bag .bt{color:#4a6b34;display:block;margin-bottom:2px;}
  #sound{pointer-events:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    background:#fffdf5;border:3px solid #fff;font-size:15px;cursor:pointer;box-shadow:0 4px 0 rgba(120,140,90,.3);}