:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --wall:#BFE3D0; --floor:#8FC9A9; --ink:#2B2A4C; --jar:rgba(255,255,255,.55);
  --grid:rgba(43,42,76,.07); --btn:#FFFFFF; --btnink:#2B2A4C; --card:#FFFFFF;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wall:#1F3A33; --floor:#2C5446; --ink:#EAF5EE; --jar:rgba(255,255,255,.08);
    --grid:rgba(234,245,238,.06); --btn:#2C5446; --btnink:#EAF5EE; --card:#2C5446;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --wall:#1F3A33; --floor:#2C5446; --ink:#EAF5EE; --jar:rgba(255,255,255,.08);
  --grid:rgba(234,245,238,.06); --btn:#2C5446; --btnink:#EAF5EE; --card:#2C5446;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{
  background:var(--wall); color:var(--ink);
  font-family:"Jua","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  overscroll-behavior:none; touch-action:manipulation;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.app{height:100%;display:flex;flex-direction:column;max-width:460px;margin:0 auto;padding:8px 14px 10px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.stats{display:flex;gap:16px;flex:1}
.stat small{display:block;font-size:12px;opacity:.7}
.stat b{font-size:22px;font-weight:400;line-height:1.1}
.next{display:flex;flex-direction:column;align-items:center}
.next small{font-size:12px;opacity:.7}
#next{width:60px;height:34px}
.iconbtn{width:42px;height:42px;border-radius:14px;border:2px solid var(--ink);background:var(--btn);color:var(--btnink);font:inherit;font-size:16px;cursor:pointer}
.stage{flex:1;min-height:0;display:flex;flex-direction:column}
#boardWrap{position:relative;flex:1;min-height:0}
.jar{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
#board{display:block;border:3px solid var(--ink);border-radius:6px 6px 20px 20px;background:var(--jar);touch-action:none}
.overlay{position:absolute;inset:3px;border-radius:4px 4px 17px 17px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;background:color-mix(in srgb,var(--wall) 82%,transparent);backdrop-filter:blur(3px)}
.overlay.show{display:flex}
.overlay h1{font-size:30px;font-weight:400;margin:0}
.overlay p{margin:0;font-size:16px;line-height:1.5;opacity:.85}
.overlay button{margin-top:6px;padding:12px 26px;border-radius:16px;border:2px solid var(--ink);background:#F08A3C;color:#2B2A4C;font:inherit;font-size:19px;cursor:pointer}
.dogRow{position:relative;height:112px;display:flex;justify-content:center;margin-top:-4px}
.dog{height:112px;width:auto;overflow:visible}
.dog .open,.dog .shut,.dog .zzz{display:none}
.dog.eat .open{display:inline}.dog.eat .closed{display:none}
.dog.sleep .eyes{display:none}.dog.sleep .shut,.dog.sleep .zzz{display:inline}
.dog.chew{animation:chomp .12s ease-out}
@keyframes chomp{50%{transform:translateY(1.5px)}}
@keyframes hop{40%{transform:translateY(-8px)}}
.tail{transform-origin:110px 96px;animation:wag .5s ease-in-out infinite alternate}
.dog.sleep .tail{animation:none}
@keyframes wag{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
.bubble{position:absolute;left:calc(50% + 58px);top:4px;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:4px 10px;font-size:17px;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;pointer-events:none;white-space:nowrap}
.bubble.show{opacity:1;transform:scale(1)}
.floor{height:10px;background:var(--floor);border-radius:6px}
.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.controls button{height:58px;border-radius:16px;border:2px solid var(--ink);background:var(--btn);color:var(--btnink);font:inherit;font-size:22px;cursor:pointer;touch-action:none}
.controls button:active{transform:translateY(2px)}
.controls .drop{background:#F6C445;color:#2B2A4C}
button:focus-visible{outline:3px solid #F08A3C;outline-offset:2px}
.dog{width:auto;height:112px;position:relative}
.dog .zzz{display:none}
.dog.sleep .zzz{display:inline}
.head{transform:rotate(var(--tilt,0deg));transform-origin:80px 84px;transition:transform .2s ease}
.dog.nod .head{animation:nod .28s ease-out}
@keyframes nod{40%{transform:translateY(2.5px) rotate(var(--tilt,0deg))}}
.dog.surprise{animation:jump .38s ease-out}
@keyframes jump{30%{transform:translateY(-10px)}}
.dog.surprise .eyes{transform:scale(1.25);transform-box:fill-box;transform-origin:center}
.sweat{display:none}
.dog.worry .sweat{display:inline;animation:drip 1.4s ease-in infinite}
@keyframes drip{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(5px)}}
.jar.thud{animation:thud .18s ease-out}
.jar.slam{animation:slam .3s ease-out}
@keyframes thud{50%{transform:translateX(-50%) translateY(2px)}}
@keyframes slam{25%{transform:translateX(-50%) translateY(5px)}50%{transform:translateX(calc(-50% - 3px)) translateY(1px)}75%{transform:translateX(calc(-50% + 2px))}}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.sprite{position:fixed;z-index:20;pointer-events:none}
.nom{position:fixed;z-index:21;pointer-events:none;font-size:15px;color:#B0531A;font-family:"Jua",sans-serif;text-shadow:0 1px 0 #fff}
.heart{position:fixed;z-index:21;pointer-events:none;font-size:16px;color:#F28BA3}
.dog .happy{display:none}
.dog.happy .happy{display:inline}.dog.happy .eyes{display:none}
.dog.ready .eyes{transform:translateY(-2px) scale(1.15);transform-box:fill-box;transform-origin:center}
.dog.ready .open{transform:scale(1.08);transform-box:fill-box;transform-origin:50% 0}
.dog.chew .closed path:not(:last-child){display:none}
.dog.chew .closed path:last-child{stroke-width:1.8}
.dog.chew .head{transform:rotate(var(--tilt,0deg)) scale(1.04,.97)}
.dog.happy .tail,.dog.ready .tail,.dog.chew .tail{animation-duration:.18s}
.dog.happy{animation:hop .4s ease-out}
.crumb{position:absolute;width:8px;height:8px;border-radius:3px;pointer-events:none}
.bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.grow{flex:1}
.coin{display:flex;align-items:center;gap:6px;height:42px;padding:0 12px 0 10px;border-radius:21px;border:2px solid var(--ink);background:var(--btn);color:var(--btnink);font:inherit;font-size:18px;cursor:pointer}
.coin b{font-weight:400;min-width:1.5em;text-align:left}
.coin .shopTag{font-size:13px;background:#F6C445;color:#2B2A4C;border-radius:10px;padding:2px 7px}
.coin.bump{animation:bump .3s ease-out}
@keyframes bump{40%{transform:scale(1.12)}}
.coinPop{position:fixed;z-index:25;pointer-events:none;font-size:17px;color:#B0531A;text-shadow:0 1px 0 #fff}
.seg{display:flex;gap:6px;background:color-mix(in srgb,var(--ink) 8%,transparent);padding:4px;border-radius:14px}
.seg button{margin:0;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--btn);box-shadow:0 0 0 2px var(--ink) inset}
.overlay.paused .seg{display:none}
.overlay .quit{display:none;margin-top:0;padding:8px 20px;background:transparent;color:var(--ink);font-size:16px}
.overlay.paused .quit{display:inline-block}
.mystery{animation:wob 1.2s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-4deg) scale(1.05)}}
.sheet{position:fixed;inset:0;z-index:30;background:rgba(20,20,30,.38);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.panel{width:100%;max-width:460px;max-height:82vh;overflow:auto;background:var(--wall);color:var(--ink);border:2px solid var(--ink);border-bottom:0;border-radius:24px 24px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.phead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.phead h2{margin:0;font-size:22px;font-weight:400}
.wallet{font-size:15px;opacity:.8;margin:-4px 0 12px}
.shop{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.item{background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.item canvas{width:52px;height:52px}
.item .nm{font-size:16px}
.item .ds{font-size:12px;opacity:.7;line-height:1.35;min-height:2.7em}
.item .own{font-size:12px;opacity:.7}
.item button{margin-top:4px;width:100%;padding:8px 0;border-radius:12px;border:2px solid var(--ink);background:#F6C445;color:#2B2A4C;font:inherit;font-size:15px;cursor:pointer}
.item button:disabled{background:transparent;color:var(--ink);opacity:.45;cursor:default}
.note{font-size:13px;opacity:.7;line-height:1.5;margin:12px 2px 0}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1.5px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
.row small{display:block;font-size:12px;opacity:.65;margin-top:2px}
.sw{width:54px;height:30px;border-radius:15px;border:2px solid var(--ink);background:transparent;position:relative;cursor:pointer;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .15s}
.sw[aria-pressed="true"]{background:#8DBF6A}
.sw[aria-pressed="true"]::after{transform:translateX(24px)}
/* 강아지 주문 카드 (강아지 왼쪽) */
.order{position:absolute;right:calc(50% + 62px);top:6px;width:96px;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:5px 7px 7px;z-index:3;color:var(--ink)}
.order[hidden]{display:none}
.order .ot{font-size:11px;opacity:.7;display:flex;justify-content:space-between}
.order .oi{display:flex;align-items:center;gap:4px;font-size:15px;margin-top:2px}
.order .oi canvas{width:20px;height:20px;flex:none}
.order .oi .n{opacity:.65;font-size:12px;margin-left:auto}
.order .pat{height:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 12%,transparent);margin-top:6px;overflow:hidden}
.order .pat i{display:block;height:100%;border-radius:3px;background:#8DBF6A;transition:width .25s}
.order.low .pat i{background:#E2577A}
.order.low{animation:shake .5s ease-in-out infinite}
@keyframes shake{25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
.order.new{animation:wob 1.2s ease-in-out infinite}
.order.done::after{content:"성공!";position:absolute;inset:-2px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#F6C445 88%,transparent);color:#2B2A4C;border:2px solid var(--ink);font-size:22px;transform:rotate(-6deg)}
.order.fail{opacity:.55}
.order.fail::after{content:"다음엔 꼭!";position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-size:12px}
.winLine{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:10px;background:#F6C445;color:#2B2A4C}
/* 표정: 조르기(beg) · 재촉(hurry) · 시무룩(sad) · 냠냠 눈 감기(munch) */
.dog .sparkle,.dog .brows,.dog .frown{display:none}
.dog.beg .sparkle{display:inline}
.dog.beg .eyes{transform:scale(1.22);transform-box:fill-box;transform-origin:center}
.dog.beg .head{transform:rotate(12deg)}
.dog.beg .open,.dog.hurry .open{display:inline}
.dog.beg .closed,.dog.hurry .closed{display:none}
.dog.hurry{animation:fidget .3s ease-in-out infinite alternate}
@keyframes fidget{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.dog.hurry .sweat{display:inline;animation:none}
.dog.hurry .brows{display:inline}
.dog.hurry .eyes{transform:translateY(-1px) scale(1.08);transform-box:fill-box;transform-origin:center}
.dog.sad .brows,.dog.sad .frown{display:inline}
.dog.sad .closed{display:none}
.dog.sad .eyes{transform:translateY(1px) scaleY(.72);transform-box:fill-box;transform-origin:center}
.dog.sad .head{transform:translateY(2.5px) rotate(-5deg)}
.dog.sad .tail{animation:none}
.dog.munch .eyes{display:none}
.dog.munch .shut{display:inline}
@media (prefers-reduced-motion: reduce){.mystery,.panel,.coin.bump,.tail,.dog.eat,.dog.nod .head,.dog.surprise,.jar.thud,.jar.slam,.dog.hurry,.order.low,.order.new{animation:none}}