/* 꼬물꼬물 곤충방 — 화면 모양 */
  @font-face{font-family:'Jua';src:url('../assets/fonts/Jua-Regular.ttf') format('truetype');font-display:swap}
  html,body{margin:0;height:100%;background:#1b2a4a;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;font-family:'Jua','Malgun Gothic',sans-serif;user-select:none}
  #stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:center center;overflow:hidden;border-radius:18px;background:#7ec8ff}
  canvas{position:absolute;left:0;top:0;display:block;touch-action:none}
  .ui{position:absolute;inset:0;pointer-events:none}
  .ui>*{pointer-events:auto}
  .hide{display:none!important}
  .btn{font-family:inherit;font-size:26px;color:#fff;background:linear-gradient(#ffc233,#ff8a00);border:5px solid #fff;border-radius:26px;white-space:nowrap;
       box-shadow:0 7px 0 rgba(0,0,0,.28);padding:8px 22px;text-shadow:0 2px 0 rgba(0,0,0,.3);cursor:pointer;transition:transform .06s}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
  .btn.blue{background:linear-gradient(#55c8ff,#1c8ff0)}
  .btn.green{background:linear-gradient(#7de35a,#2fae2f)}
  .btn.purple{background:linear-gradient(#9d8bff,#5b45e0)}
  .btn.gray{background:linear-gradient(#b9c2cf,#8793a3)}
  .btn.big{font-size:40px;padding:14px 46px;border-radius:36px}
  .btn[disabled]{filter:grayscale(.8) brightness(.85);cursor:default}
  .pill{background:rgba(255,255,255,.93);border:4px solid #fff;border-radius:24px;box-shadow:0 5px 0 rgba(0,0,0,.2);color:#3b2a14;font-size:26px;padding:6px 16px;display:flex;align-items:center;gap:8px;white-space:nowrap}
  #hudL{position:absolute;left:18px;top:14px;display:flex;gap:10px}
  #hudR{position:absolute;right:14px;top:14px;display:flex;gap:8px}
  #hudR .btn{font-size:21px;padding:8px 14px}
  #hudL .pill{font-size:22px;padding:5px 11px;gap:6px}
  .bar{width:56px;height:18px;border-radius:10px;background:#d6e6f5;overflow:hidden}
  #humFill{height:100%;width:50%;background:linear-gradient(#6fd3ff,#1c9bf0);border-radius:10px}
  #dirtFill{height:100%;width:4%;background:linear-gradient(#9be36b,#3fb53f);border-radius:10px}
  #zones{position:absolute;left:50%;top:76px;transform:translateX(-50%);transform-origin:center top;display:flex;gap:8px}
  .zone{position:relative;font-size:19px;padding:4px 12px;white-space:nowrap;border-radius:16px;background:rgba(0,0,0,.34);color:rgba(255,255,255,.6);border:3px solid transparent}
  .zone.on{background:#2fae2f;color:#fff;border-color:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.25)}
  .zone.now{background:#ff8a00;transform:scale(1.12)}
  .zone.stall{background:#e0a100;margin-right:34px}
  #zones.drop{gap:20px;top:84px}
  #zones.drop .zone.on{transform:scale(1.35);box-shadow:0 0 0 5px rgba(255,255,255,.85),0 6px 0 rgba(0,0,0,.25)}
  @keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg) scale(1.1)}75%{transform:rotate(13deg) scale(1.1)}}
  #gBox.shake{animation:shake .22s infinite}
  .acard{width:200px;border-radius:24px;border:6px solid #cfe6fb;background:#eef7ff;padding:10px 8px;cursor:pointer;font-family:inherit;color:#3b2a14}
  .acard.sel{border-color:#ffb637;background:#fff6d6;box-shadow:0 6px 0 rgba(0,0,0,.18)}
  .acard img{width:130px;height:130px;object-fit:contain;display:block;margin:0 auto 4px}
  .acard b{display:block;font-size:26px;font-weight:normal}
  .acard i{font-style:normal;font-size:18px;color:#7a6a55}
  #moveList{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:640px;margin:8px 0 18px}
  #moveList small{font-size:17px;opacity:.9}
  .zone.stall.now{background:#ff8a00}
  .zone.alert::after{content:'!';position:absolute;right:-10px;top:-12px;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;background:#ff3b3b;color:#fff;border:3px solid #fff;font-size:20px;animation:blink .6s infinite alternate}
  @keyframes blink{to{transform:scale(1.25)}}
  .nav{position:absolute;top:50%;margin-top:-36px;width:72px;height:72px;padding:0;border-radius:50%;font-size:34px}
  #navL{left:10px}#navR{right:10px}
  #tools{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:9px;align-items:flex-end}
  .tool{width:80px;height:80px;border-radius:50%;background:radial-gradient(#fff,#e7f3ff);border:5px solid #fff;box-shadow:0 7px 0 rgba(0,0,0,.28);
        cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .08s}
  .tool img{width:66px;height:66px;object-fit:contain;pointer-events:none}
  .tool span{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-size:16px;color:#fff;background:#3b2a14;border-radius:10px;padding:1px 9px;white-space:nowrap}
  .tool.sel{border-color:#ffd400;transform:translateY(-12px) scale(1.12);box-shadow:0 12px 0 rgba(0,0,0,.25),0 0 0 6px rgba(255,212,0,.5)}
  .hand{font-size:46px}
  #btnHunt{margin-left:12px}
  #deskBar{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);display:flex;gap:12px}
  #deskBar .btn{font-size:22px;padding:8px 14px}
  #tools .btn{font-size:23px;padding:8px 14px}
  #act,#jact{position:absolute;display:flex;gap:8px}
  #jact .btn{font-size:19px;padding:5px 12px;border-width:4px;border-radius:18px}
  #stage.m #jact .btn{font-size:25px;padding:8px 14px}
  #act .btn{font-size:19px;padding:5px 12px;border-width:4px;border-radius:18px}
  #act{z-index:2}
  .srow{display:flex;align-items:center;gap:14px;text-align:left;font-size:20px}
  .srow .btn{min-width:250px;font-size:22px}
  #btnClean{position:absolute;left:50%;bottom:122px;transform:translateX(-50%);font-size:24px;animation:bob 1.2s ease-in-out infinite}
  #btnClean:hover,#btnClean:active{transform:translateX(-50%)}
  #title{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:34px 0 46px;box-sizing:border-box}
  #logo{font-size:104px;color:#fff;-webkit-text-stroke:14px #ff7a00;paint-order:stroke fill;text-shadow:0 10px 0 rgba(0,0,0,.22);letter-spacing:2px;animation:bob 2.4s ease-in-out infinite}
  #logo small{display:block;font-size:34px;-webkit-text-stroke:8px #1c8ff0;text-align:center;margin-top:-6px}
  @keyframes bob{50%{margin-bottom:8px;margin-top:-8px}}
  .panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.96);border:7px solid #fff;border-radius:38px;
         box-shadow:0 12px 0 rgba(0,0,0,.25);padding:22px 30px;color:#3b2a14;text-align:center}
  .panel h2{margin:0 0 12px;font-size:38px;font-weight:normal;color:#ff7a00}
  .panel p{margin:6px 0 14px;font-size:24px}
  #pick{top:auto;bottom:26px;transform:translateX(-50%)}
  #pick .row{display:flex;gap:16px;justify-content:center;margin:26px 0 20px}
  #reveal{top:auto;bottom:22px;transform:translateX(-50%);min-width:520px}
  #dexGrid{display:grid;grid-template-columns:repeat(8,140px);gap:6px;max-height:400px;overflow-y:auto;touch-action:pan-y;padding-right:6px;margin-bottom:10px}
  #dex .panel{padding:14px 24px}
  #dex .panel h2{margin-bottom:6px;font-size:32px}
  .card{background:#eef7ff;border-radius:22px;padding:6px 4px 8px;border:4px solid #cfe6fb}
  .card img{width:74px;height:74px;object-fit:contain}
  .card.no img{filter:brightness(0);opacity:.28}
  .card b{display:block;font-size:19px;font-weight:normal}
  .card i{font-style:normal;font-size:13px;color:#7a6a55}
  .card.yes{background:#fff6d6;border-color:#ffd24a}
  .card.spec{background:#f7ecd2;border-color:#a9793f;position:relative}
  .card.spec::before{content:'';position:absolute;left:50%;top:10px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#e04848;border:2px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.3)}
  .card.spec img{filter:saturate(.75)}
  .card.none{background:#ece6da;border-color:#cfc5b2;border-style:dashed}
  .card.none img{filter:brightness(0);opacity:.14}
  #toast{position:absolute;left:50%;top:128px;transform:translateX(-50%);background:#3b2a14;color:#fff;font-size:26px;border-radius:22px;padding:8px 24px;
         border:4px solid #fff;opacity:0;transition:opacity .3s;pointer-events:none;width:max-content;max-width:1000px;text-align:center;line-height:1.3;z-index:4}
  #toast.show{opacity:1}
  #toast.low{top:auto!important;bottom:10px}
  #rotate{position:fixed;inset:0;z-index:99;background:#1b2a4a;color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:26px;text-align:center}
  #rotate b{display:block;width:46px;height:80px;border:6px solid #fff;border-radius:12px;animation:tilt 1.6s ease-in-out infinite}
  @keyframes tilt{50%{transform:rotate(90deg)}}
  @media (orientation:portrait) and (max-width:900px){#rotate{display:flex}}
  #stage.m .zone{font-size:25px;padding:6px 14px}
  #stage.m #zones{gap:10px}
  #stage.m #toast{font-size:32px;top:140px}
  #stage.m .tool span{font-size:20px}
  #stage.m #hudL .pill{font-size:24px}
  #stage.m #hudR .btn{font-size:24px;padding:9px 14px}
  #stage.m #act .btn{font-size:25px;padding:8px 14px}
  #stage.m .panel p{font-size:28px}
  #stage.m .srow{font-size:24px}
  #loading{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;color:#fff;font-size:40px;background:linear-gradient(#55c8ff,#2f9df0);text-shadow:0 3px 0 rgba(0,0,0,.2)}
  #loadBar{width:520px;height:30px;border-radius:18px;background:rgba(255,255,255,.35);border:5px solid #fff;overflow:hidden}
  #loadFill{height:100%;width:0;background:linear-gradient(#ffe07a,#ffb637);border-radius:12px;transition:width .15s}

  /* ---- 그림 아이콘 (글 속의 기호 자리에 들어간다) */
  .ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.24em;background:center/contain no-repeat;pointer-events:none;font-style:normal}
  .btn small,.pill small,.panel h2 small{font-size:.72em;opacity:.92}
  .zone small{font-size:.82em;opacity:.95;pointer-events:none}
  .zone.hold{background:#b9772a}
  .zone.hold.now{background:#ff8a00}
  /* ---- 오른쪽 옆 버튼: 주문서 · 씨름 */
  #side{position:absolute;right:14px;top:124px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
  #side .btn{font-size:20px;padding:6px 12px;position:relative}
  .btn.alert::after{content:'!';position:absolute;right:-8px;top:-12px;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;background:#ff3b3b;color:#fff;border:3px solid #fff;font-size:20px;animation:blink .6s infinite alternate}
  /* ---- 처음 안내 */
  #guide{position:absolute;left:16px;top:122px;width:350px;background:rgba(255,255,255,.96);border:5px solid #ffd24a;border-radius:24px;box-shadow:0 6px 0 rgba(0,0,0,.22);padding:12px 14px;color:#3b2a14;font-size:21px;line-height:1.35;box-sizing:border-box}
  #guideB{display:flex;align-items:center;gap:8px;margin-top:8px;justify-content:flex-end}
  #guideB span{margin-right:auto;color:#a08a6a;font-size:17px}
  #guideB .btn{font-size:18px;padding:4px 12px;border-width:3px;border-radius:16px;box-shadow:0 4px 0 rgba(0,0,0,.25)}
  .hint{animation:hint .7s ease-in-out infinite alternate}
  @keyframes hint{to{box-shadow:0 0 0 10px rgba(255,220,60,.9),0 7px 0 rgba(0,0,0,.28)}}
  /* ---- 목록이 긴 창 */
  .scroll{overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  .orow{display:flex;gap:14px;align-items:center;text-align:left;background:#fff6d6;border:4px solid #ffd24a;border-radius:22px;padding:10px 14px;margin-bottom:10px}
  .orow img{width:92px;height:92px;object-fit:contain}
  .orow b{display:block;font-weight:normal;font-size:26px}
  .orow span{font-size:20px;color:#7a6a55}
  .ofit{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  .ofit .btn{font-size:19px;padding:5px 12px;border-width:4px}
  .ofit i{font-style:normal;color:#a08a6a;font-size:19px}
  .hrow{display:flex;gap:14px;text-align:left;padding:9px 4px;border-bottom:2px dashed #eadfca;font-size:21px;line-height:1.4}
  .hrow b{flex:0 0 150px;font-weight:normal;color:#ff7a00}
  .setRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
  .setRow .btn{font-size:22px;padding:7px 16px}
  #nameIn{font-family:inherit;font-size:34px;width:320px;text-align:center;border:5px solid #ffd24a;border-radius:20px;padding:8px 12px;color:#3b2a14;user-select:text;-webkit-user-select:text;outline:none}
  #sumoList .btn{font-size:22px}
  .card.yes{cursor:pointer}
  #stage.m #side .btn{font-size:24px;padding:8px 14px}
  #stage.m #guide{font-size:25px;width:410px}
  #stage.m #guideB .btn{font-size:22px;padding:6px 14px}
  #stage.m .hrow{font-size:24px}