:root{
  --bg:#f1e4c8; --paper:#fff8e6; --ink:#222; --pink:#ff8fa3; --yellow:#ffd23f; --green:#7cb85c; --blue:#6ec1e4; --orange:#ffa94d;
  --wob:18px 22px 16px 24px / 22px 16px 24px 18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;overscroll-behavior:none}
body{user-select:none;-webkit-user-select:none}
#app{max-width:480px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;padding:10px 14px calc(10px + env(safe-area-inset-bottom));overflow:hidden}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
h1,h2,h3,p{margin:0}

.logo{font-size:44px;line-height:1;letter-spacing:-1px;text-shadow:3px 3px 0 var(--yellow)}
.logo small{display:block;font-size:15px;letter-spacing:0;text-shadow:none;margin-top:6px;opacity:.75}
.logo.sm{font-size:26px;text-shadow:2px 2px 0 var(--yellow)}

.btn{font:inherit;font-size:18px;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:var(--wob);padding:10px 14px;box-shadow:3px 4px 0 var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;touch-action:manipulation}
.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.y{background:var(--yellow)} .btn.p{background:var(--pink)} .btn.g{background:var(--green)} .btn.b{background:var(--blue)} .btn.o{background:var(--orange)}
.btn.big{font-size:22px;min-height:58px;width:100%}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;box-shadow:1px 1px 0 var(--ink);transform:none}
.btn.sm{font-size:15px;min-height:40px;padding:6px 10px;box-shadow:2px 3px 0 var(--ink)}
.row{display:flex;gap:10px} .row>*{flex:1}
.col{display:flex;flex-direction:column;gap:10px}
.center{text-align:center}
.muted{opacity:.65;font-size:14px}
.gap{height:10px}

.top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.top .who{font-size:15px;text-align:right;line-height:1.25}
.back{font-size:15px;min-height:40px;padding:6px 12px;box-shadow:2px 3px 0 var(--ink)}
.title{font-size:24px}

.box{background:var(--paper);border:3px solid var(--ink);border-radius:var(--wob);padding:12px}

/* 닉네임 */
.nick-screen{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;text-align:center}
.nick-name{font-size:32px;padding:18px 8px;background:var(--paper);border:3px dashed var(--ink);border-radius:var(--wob)}
.hero-row{display:flex;justify-content:center;gap:4px;height:96px}
.hero-row img{height:96px;width:96px;animation:bob 1.6s ease-in-out infinite}
.hero-row img:nth-child(2){animation-delay:.3s} .hero-row img:nth-child(3){animation-delay:.6s}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}

/* 내 기지 */
.field{position:relative;flex:1;min-height:170px;background:var(--paper);border:3px solid var(--ink);border-radius:var(--wob);overflow:hidden;
  background-image:radial-gradient(#e6d6b0 1.5px,transparent 1.6px);background-size:22px 22px}
.field .mob{position:absolute;width:84px;height:84px;transition:left 2.4s ease-in-out,top 2.4s ease-in-out;pointer-events:none}
.field .mob img{width:100%;height:100%;animation:bob 1.4s ease-in-out infinite}
.field .nestbox{position:absolute;left:50%;top:10px;transform:translateX(-50%);text-align:center;font-size:13px}
.field .nestbox .nest{width:92px;height:62px;border:3px solid var(--ink);border-radius:50%;background:#c58f4f;display:flex;align-items:flex-end;justify-content:center;box-shadow:inset 0 -10px 0 #a06d33}
.field .nestbox img{width:64px;height:64px;margin-bottom:8px}
.field .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:17px;line-height:1.5;white-space:pre-line}
.notice{font-size:14px;background:#ffe3e3;border:2px dashed var(--ink);border-radius:12px;padding:6px 10px;margin-top:8px}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.menu .btn{flex-direction:column;gap:0;line-height:1.2;min-height:64px}
.menu .btn small{font-size:13px;opacity:.75}
.pulse{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.05)}}

/* 합성소 */
.hand{display:flex;flex-wrap:wrap;gap:8px}
.mat{position:relative;width:calc(25% - 6px);min-width:70px;border:3px solid var(--ink);border-radius:var(--wob);background:#ffe8c2;padding:8px 2px 6px;text-align:center;font-size:14px;cursor:pointer;box-shadow:2px 3px 0 var(--ink)}
.mat.ins{background:#d9f2c4}
.mat .emo{font-size:30px;line-height:1.1;display:block}
.mat .cnt{position:absolute;right:-6px;top:-8px;background:var(--ink);color:#fff;border-radius:99px;font-size:12px;padding:2px 7px}
.mat.sel{background:var(--yellow);transform:translateY(-4px) rotate(-2deg)}
.mat.spark::after{content:'✨';position:absolute;left:-6px;top:-10px;font-size:18px}
.mixrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:26px;margin:10px 0}
.slot{width:86px;height:86px;border:3px dashed var(--ink);border-radius:var(--wob);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;background:var(--paper)}
.slot .emo{font-size:34px;line-height:1}
.lab-h{font-size:16px;margin:10px 0 6px}

/* 도감 */
.dex{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cell{position:relative;border:3px solid var(--ink);border-radius:var(--wob);background:var(--paper);padding:4px 2px 4px;text-align:center;font-size:12px;cursor:pointer;min-height:96px}
.cell img{width:100%;aspect-ratio:1;display:block}
.cell.no img{filter:brightness(0);opacity:.18}
.cell.no{cursor:default}
.cell .g{position:absolute;left:-4px;top:-6px;font-size:11px;color:#fff;border:2px solid var(--ink);border-radius:99px;padding:1px 6px}
.cell .tag{position:absolute;right:-4px;top:-6px;font-size:14px}
.cell.away img{opacity:.35}
.gbadge{display:inline-block;color:#fff;border:2px solid var(--ink);border-radius:99px;padding:2px 10px;font-size:15px}

/* 털러 가기 목록 */
.baseitem{display:flex;align-items:center;gap:10px;background:var(--paper);border:3px solid var(--ink);border-radius:var(--wob);padding:8px 10px;margin-bottom:8px}
.baseitem img{width:54px;height:54px}
.baseitem .nm{flex:1;line-height:1.25;font-size:17px}
.baseitem .nm small{display:block;font-size:13px;opacity:.7}

/* 털기 판 */
.hud{display:flex;align-items:center;gap:8px;font-size:16px;margin-bottom:6px}
.hud .bar{flex:1;height:14px;border:3px solid var(--ink);border-radius:99px;background:var(--paper);overflow:hidden}
.hud .bar i{display:block;height:100%;background:var(--green);width:100%}
.hud .bar.low i{background:var(--pink)}
.board{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.board canvas{border:3px solid var(--ink);border-radius:14px;background:var(--paper);touch-action:none}
.pad{display:flex;align-items:center;justify-content:space-between;padding:8px 6px 0;touch-action:none}
.dpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:3px}
.dpad button{font:inherit;font-size:22px;border:3px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:2px 3px 0 var(--ink);touch-action:none;color:var(--ink);padding:0}
.dpad button.on{background:var(--yellow);transform:translate(1px,2px);box-shadow:1px 1px 0 var(--ink)}
.dpad .u{grid-column:2;grid-row:1}.dpad .l{grid-column:1;grid-row:2}.dpad .r{grid-column:3;grid-row:2}.dpad .d{grid-column:2;grid-row:3}
.bomb{width:112px;height:112px;border-radius:50%;font:inherit;font-size:44px;border:3px solid var(--ink);background:var(--orange);box-shadow:3px 5px 0 var(--ink);touch-action:none;line-height:1;color:var(--ink)}
.bomb small{display:block;font-size:14px}
.bomb:active,.bomb.on{transform:translate(2px,4px);box-shadow:1px 1px 0 var(--ink)}

/* 모달 */
.modal-bg{position:fixed;inset:0;background:rgba(40,30,10,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal{background:var(--bg);border:3px solid var(--ink);border-radius:var(--wob);box-shadow:5px 6px 0 var(--ink);padding:18px 16px;width:100%;max-width:400px;max-height:92dvh;overflow-y:auto;text-align:center;display:flex;flex-direction:column;gap:12px;animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.modal h2{font-size:28px;line-height:1.15}
.modal p{font-size:17px;line-height:1.45}
.modal .pic{width:150px;height:150px;margin:0 auto}
.modal .pic.shake{animation:shake .12s linear infinite}
@keyframes shake{25%{transform:translate(-4px,2px) rotate(-4deg)}75%{transform:translate(4px,-2px) rotate(4deg)}}
.aigo{font-size:62px;line-height:1;color:#e03131;text-shadow:3px 3px 0 var(--ink);animation:wob .5s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-5deg) scale(1.06)}}
.pick{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px}
.pick .p1{flex:0 0 68px;border:3px solid var(--ink);border-radius:14px;background:var(--paper);padding:2px;font-size:11px;cursor:pointer}
.pick .p1 img{width:100%;display:block}
.pick .p1.sel{background:var(--yellow)}
.how{font-size:15px;text-align:left;background:var(--paper);border:2px dashed var(--ink);border-radius:12px;padding:8px 10px;line-height:1.5}
.linkbox{font:inherit;font-size:13px;width:100%;border:2px solid var(--ink);border-radius:10px;padding:8px;background:#fff;user-select:text;-webkit-user-select:text}

#toast{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:99px;padding:10px 18px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;max-width:88vw;text-align:center}
#toast.on{opacity:.95}

@media (max-height:640px){
  .dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}
  .bomb{width:92px;height:92px;font-size:36px}
  .logo{font-size:36px}
}