:root{
  --ink:#2e2620; --cream:#fffdf5; --panel:#fff7e6;
  --gold:#f7b731; --green:#20bf6b; --blue:#3867d6; --red:#eb3b5a;
  --brown:#a0642e; --purple:#b197fc;
  --device:#ffd98a; --device2:#ffc35e; --bezel:#5a3e28;
  --shadow:0 6px 0 rgba(0,0,0,.14);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; font-family:inherit;}
html,body{margin:0; height:100%; overscroll-behavior:none;}
body{
  font-family:"Jua","Comic Sans MS",system-ui,sans-serif; color:var(--ink);
  background:radial-gradient(circle at 50% 0%, #ffe9c2, #f6b878 70%, #e79a58);
  display:flex; align-items:center; justify-content:center; height:100dvh;
  padding:12px; overflow:hidden;
}
img{user-select:none;}

/* ===== 콘솔 기기 프레임 =====
   확대(큰 창)에서 페이지 스크롤이 생기지 않도록, 창 전체(뷰포트)에 항상 맞춘다.
   ⚠️ 게임 화면 위에 HUD/액션바를 오버레이로 얹었더니, 그 영역이 클릭/탭을 가로채서
   화면 가장자리(맵 이동)나 그 부분의 오브젝트를 클릭으로 못 가는 문제가 있었음.
   그래서 HUD/액션바는 게임 화면과 "자기 공간"을 갖는 원래 구조로 되돌리되,
   화면이 최대한 크게 남도록 각 줄을 컴팩트하게 만든다(브랜드+HUD 한 줄로 통합 등). */
.device{
  position:relative; width:100%; max-width:1920px;
  height:100%; max-height:100%;
  background:linear-gradient(180deg,var(--device),var(--device2));
  border:5px solid var(--bezel); border-radius:26px;
  padding:10px; box-shadow:0 12px 30px rgba(90,62,40,.4), inset 0 2px 0 rgba(255,255,255,.4);
  display:flex; flex-direction:column; gap:6px;
  overflow:hidden;
}

/* ===== 상단: 브랜드+HUD 한 줄(공간 절약) ===== */
.topbar{display:flex; align-items:center; gap:6px;}
.brand{display:flex; align-items:center; gap:4px; font-size:clamp(14px,1vw,20px); color:var(--bezel); flex:0 0 auto;}
.brand .dot{width:clamp(7px,0.5vw,11px); height:clamp(7px,0.5vw,11px); border-radius:50%; box-shadow:inset 0 -1px 1px rgba(0,0,0,.25);}
.brand .dot.r{background:#ff5a5a;} .brand .dot.y{background:#ffcf33;} .brand .dot.g{background:#4cd68a;}

/* ===== HUD (인게임) ===== */
.hud{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto; background:rgba(90,62,40,.16); border-radius:14px; padding:6px;}
.chip{display:flex; align-items:center; gap:6px; background:var(--cream); border-radius:11px;
  padding:4px 9px; box-shadow:0 2px 0 rgba(0,0,0,.12); flex:1 1 auto; min-width:0;}
.chip .ic{width:clamp(18px,1.3vw,30px); height:clamp(18px,1.3vw,30px); flex:none;}
.chip .col{min-width:0;}
.chip .k{font-size:clamp(9px,0.6vw,14px); color:#a58b6f; line-height:1;}
.chip .v{font-size:clamp(13px,1vw,22px); line-height:1.15; white-space:nowrap;}
.chip.rank{flex:1 1 130px;}
.bar{height:7px; border-radius:6px; background:#e6dcc7; overflow:hidden; margin-top:3px; min-width:56px;}
.bar > i{display:block; height:100%; width:0%; border-radius:6px; transition:width .3s;}
.bar.gong > i{background:linear-gradient(90deg,#f7b731,#fa8231);}
.bar.fatigue > i{background:linear-gradient(90deg,#20bf6b,#f7b731,#eb3b5a);}

/* ===== 월드 화면: 위아래 UI를 뺀 나머지 세로 공간을 전부 차지(=최대한 크게) =====
   min-height:0이 없으면 flex 자식이 내용 크기 밑으로 못 줄어들어 창 밖으로 넘쳐 스크롤이 생김. */
.screen{position:relative; flex:1 1 auto; min-height:0; min-width:0;
  border-radius:16px; overflow:hidden; border:4px solid var(--bezel);
  background:#9fe08f; box-shadow:inset 0 0 0 3px rgba(255,255,255,.35);}
.scene{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
/* 캔버스 고유 크기(1920x1080)를 유지한 채, .screen 크기에 맞춰
   가로·세로 둘 다 넘치지 않게 축소(비율 유지) — 어떤 창 크기에서도 스크롤 없이 꽉 참 */
.world{display:block; width:auto; height:auto; max-width:100%; max-height:100%; touch-action:none;}

.talk{background:#fffbe9; border:2px solid #ffe08a; border-radius:12px; padding:6px 11px;
  font-size:clamp(13px,0.9vw,18px); text-align:center; line-height:1.3; min-height:18px;
  box-shadow:0 2px 0 rgba(0,0,0,.08);}

/* 터치 방향패드 */
.dpad{position:absolute; left:8px; bottom:10px; display:none;
  grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,44px); gap:4px; z-index:6; opacity:.92;}
.dpad .dbtn{border:none; border-radius:11px; background:rgba(46,38,32,.55); color:#fff; font-size:19px;
  cursor:pointer; touch-action:none; user-select:none;}
.dpad .dbtn.up{grid-area:1/2/2/3;} .dpad .dbtn.left{grid-area:2/1/3/2;}
.dpad .dbtn.act{grid-area:2/2/3/3; background:var(--green); font-size:22px;} .dpad .dbtn.right{grid-area:2/3/3/4;}
.dpad .dbtn.down{grid-area:3/2/4/3;}
@media (pointer:coarse){ .dpad{display:grid;} }

/* ===== 액션 바 ===== */
.actionbar{display:flex; gap:6px;}
.abtn{position:relative; flex:1; border:none; border-radius:13px; padding:9px 4px; cursor:pointer;
  background:var(--cream); color:var(--ink); font-size:clamp(13px,0.9vw,20px); box-shadow:0 3px 0 rgba(0,0,0,.18);
  display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1;}
.abtn .e{font-size:clamp(19px,1.5vw,32px);}
.abtn img.e{width:clamp(19px,1.5vw,32px); height:clamp(19px,1.5vw,32px); object-fit:contain;}
.abtn:active{transform:translateY(3px); box-shadow:0 0 0 rgba(0,0,0,.18);}
.abtn .badge{position:absolute; top:3px; right:6px; background:var(--red); color:#fff;
  border-radius:9px; font-size:10px; padding:0 5px; min-width:16px;}

/* ===== 공용 오버레이 ===== */
.overlay{position:absolute; inset:0; background:rgba(46,38,32,.55); display:flex; align-items:center;
  justify-content:center; padding:16px; opacity:0; pointer-events:none; transition:.2s; z-index:30;}
.overlay.show{opacity:1; pointer-events:auto;}
#battle{position:absolute; inset:0; border-radius:12px; z-index:20;}
#battle .battlebox{width:100%;}

.popcard{position:relative; background:var(--cream); border-radius:20px; padding:16px 14px;
  max-width:420px; width:100%; max-height:88%; overflow:auto; box-shadow:0 12px 0 rgba(0,0,0,.2);
  transform:scale(.9); transition:.2s; border:3px solid #fff;}
.overlay.show .popcard{transform:scale(1);}
.popclose{position:absolute; top:8px; right:8px; border:none; background:#eee; color:#666;
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px; box-shadow:0 2px 0 rgba(0,0,0,.12);}
.popclose:active{transform:translateY(2px);}
.popcard h2{margin:2px 0 10px; font-size:21px; padding-right:28px;}
.popcard h3{margin:12px 0 7px; font-size:15px; display:flex; justify-content:space-between; align-items:center;}

.modal{background:var(--cream); border-radius:22px; padding:22px 18px; text-align:center; max-width:330px;
  width:100%; box-shadow:0 10px 0 rgba(0,0,0,.2); transform:scale(.85); transition:.25s; border:3px solid #fff;}
.overlay.show .modal{transform:scale(1);}
.modal .em{font-size:52px;} .modal h2{margin:6px 0; font-size:24px;} .modal p{color:#7a6650; font-size:14px; margin:4px 0 14px; white-space:pre-line;}

/* ===== 버튼/리스트 공용(팝업 내용) ===== */
.btn{border:none; border-radius:14px; padding:11px 15px; font-size:15px; color:#fff; cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.18); transition:transform .07s, box-shadow .07s;}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.18);}
.btn:disabled{filter:grayscale(.6) brightness(.95); opacity:.7; cursor:not-allowed;}
.btn.work{background:var(--green);} .btn.sell{background:var(--gold);} .btn.sleep{background:var(--blue);}
.btn.give{background:var(--red);} .btn.up{background:var(--brown);}
.act{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.muted{color:#b3a082; font-size:13px;}
.inv{display:flex; flex-wrap:wrap; gap:6px; min-height:30px; align-items:center;}
.slot{background:#fff; border-radius:12px; padding:4px 8px; font-size:15px; box-shadow:0 2px 0 rgba(0,0,0,.08);
  display:flex; align-items:center; gap:4px;}
.slot .cnt{background:var(--brown); color:#fff; border-radius:9px; font-size:12px; padding:0 5px;}
.slot.rare{box-shadow:0 0 0 2px var(--gold), 0 2px 0 rgba(0,0,0,.1);}
.shopgrid{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
.row{display:flex; justify-content:space-between; align-items:center; background:#fff; border-radius:12px;
  padding:6px 8px; font-size:14px; box-shadow:0 2px 0 rgba(0,0,0,.07); margin-bottom:6px;}
.row button{border:none; background:var(--gold); color:#fff; border-radius:10px; padding:5px 9px; font-size:13px; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.15);}
.row button:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.15);}
.tabs{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px;}
.tab{border:none; background:#fff; color:#9b8468; border-radius:12px; padding:6px 9px; font-size:12px;
  cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.08);}
.tab.on{background:var(--brown); color:#fff;}
.spr{display:inline-block; height:1.1em; width:auto; vertical-align:-0.18em;}

/* 전투 씬 — 클리커형: 몬스터를 직접 클릭해서 공격 */
.bfield{display:flex; justify-content:space-around; align-items:flex-end; padding:10px; background:linear-gradient(180deg,#3a4149,#20252b);
  border-radius:12px; color:#fff; position:relative; overflow:hidden;}
.bfield .who{text-align:center; position:relative;}
.bfield .em{font-size:46px; display:inline-block; transition:transform .08s;}
.bfield .who.clickable{cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;}
.bfield .who.clickable:active .em{transform:scale(.88);}
.bfield .who.clickable::after{content:"👆탭!"; position:absolute; top:-6px; right:-4px; font-size:11px;
  background:#ffcf33; color:#3a2b1f; padding:1px 6px; border-radius:8px; opacity:.9;}
@keyframes hitShake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px) rotate(-4deg)}
  40%{transform:translateX(5px) rotate(3deg)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}}
.em.hitfx{animation:hitShake .28s ease-in-out;}
@keyframes dmgFlash{0%{filter:brightness(2) saturate(2)} 100%{filter:none}}
.who.dmgflash .em{animation:dmgFlash .25s ease-out;}
.dmgnum{position:absolute; left:50%; top:0; font-weight:800; font-size:18px; pointer-events:none;
  text-shadow:0 2px 2px rgba(0,0,0,.4); animation:dmgFloat .7s ease-out forwards; z-index:6; white-space:nowrap;}
.dmgnum.foe{color:#ff5a5a;} .dmgnum.hero{color:#ffe066;}
@keyframes dmgFloat{from{transform:translate(-50%,0); opacity:1} to{transform:translate(-50%,-46px); opacity:0}}
.atkbar{height:5px; width:70px; margin:4px auto 0; border-radius:4px; background:#ffffff30; overflow:hidden;}
.atkbar > i{display:block; height:100%; width:0%; background:#ff9f43; transition:width .08s linear;}
.hitburst{position:absolute; left:50%; top:38%; width:64px; height:64px; transform:translate(-50%,-50%) scale(.3);
  opacity:0; pointer-events:none; z-index:7; animation:hitBurst .35s ease-out forwards;}
@keyframes hitBurst{0%{opacity:0; transform:translate(-50%,-50%) scale(.3)}
  30%{opacity:1; transform:translate(-50%,-50%) scale(1.05)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.3)}}
/* 콤보 배지 — 연속 클릭 시 뜨는 순수 연출(데미지 수치는 안 바뀜) */
.combo{position:absolute; left:50%; top:-20px; transform:translateX(-50%); font-weight:900; font-size:15px;
  color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.5); background:linear-gradient(135deg,#ff9f43,#ff5a5a);
  padding:2px 10px; border-radius:12px; white-space:nowrap; pointer-events:none; z-index:8;
  animation:comboPop .55s ease-out forwards;}
@keyframes comboPop{0%{transform:translateX(-50%) scale(.4); opacity:0}
  25%{transform:translateX(-50%) scale(1.15); opacity:1} 70%{transform:translateX(-50%) scale(1); opacity:1}
  100%{transform:translateX(-50%) scale(.9) translateY(-10px); opacity:0}}
/* 클릭한 자리에서 퍼지는 리플 — 탭했다는 즉각적인 반응감 */
.clickRipple{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:rgba(255,255,255,.85); pointer-events:none; z-index:6; animation:rippleOut .4s ease-out forwards;}
@keyframes rippleOut{from{transform:scale(.3); opacity:.9} to{transform:scale(3.4); opacity:0}}

/* 토스트 */
.toast{position:absolute; left:50%; top:52px; transform:translateX(-50%) translateY(-20px); background:var(--ink);
  color:#fff; padding:8px 14px; border-radius:20px; font-size:14px; opacity:0; transition:.3s; z-index:40;
  pointer-events:none; white-space:nowrap;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* 획득 이펙트 */
.float{position:absolute; font-size:22px; pointer-events:none; animation:fl 1s ease-out forwards; z-index:5;}
@keyframes fl{from{transform:translate(0,0); opacity:1} to{transform:translate(var(--dx,0),-60px); opacity:0}}

/* 미니게임 트랙 */
.mgtrack{position:relative; height:26px; border-radius:13px; margin:10px 0 14px;
  background:linear-gradient(90deg,#ffd6d6,#fff3bf,#ffd6d6); overflow:hidden; border:3px solid #fff;}
.mgzone{position:absolute; left:38%; width:24%; top:0; bottom:0; background:rgba(32,191,107,.55); border-left:2px solid #20bf6b; border-right:2px solid #20bf6b;}
.mgmarker{position:absolute; top:-2px; width:8px; height:30px; background:var(--ink); border-radius:4px; transform:translateX(-50%); box-shadow:0 0 0 2px #fff;}

/* 힌트/접근성 */
.kbdhint{display:none; text-align:center; font-size:11px; color:var(--bezel);
  background:rgba(255,251,233,.9); border-radius:9px; padding:3px 8px; width:fit-content; margin:0 auto;}
.kbdhint b{background:rgba(0,0,0,.08); border-radius:5px; padding:0 5px;}
@media (hover:hover) and (pointer:fine){ .kbdhint{display:block;} }
button:focus-visible, .tab:focus-visible, .abtn:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }