:root{
  --ink:#4a3426; --ink-soft:#7a5f4c; --paper:#fffaf2; --paper-2:#fff3e2;
  --yellow:#f7c93b; --blue:#4b8fe0; --red:#ef5b5b; --gray:#a6a6a6; --green:#4fbf73;
  --pink:#ff8fb1; --shadow:0 6px 18px rgba(80,40,10,.22);
  --r:18px;
  font-family:"Gowun Dodum",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#2b2230;overflow:hidden}
body{display:flex;justify-content:center;align-items:center}
button{font:inherit;color:inherit;cursor:pointer;border:0}
.jua{font-family:"Jua",sans-serif}

#app{position:relative;width:100%;max-width:480px;height:100dvh;overflow:hidden;background:#f3c9a4;box-shadow:0 0 60px rgba(0,0,0,.5)}
@media (min-width:600px){#app{height:min(100dvh,920px);border-radius:28px}}

#stage{position:absolute;inset:0;overflow:hidden}
.world{position:absolute;left:50%;bottom:0;transform:translateX(-50%);container-type:inline-size}
.bgimg{position:absolute;inset:0;width:100%;height:100%;display:block}
.layer{position:absolute;inset:0;pointer-events:none}
.sprite{position:absolute;transform:translateX(-50%);transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 6px 4px rgba(60,30,10,.25))}
.sprite img{display:block;width:100%;height:auto}
.bob{animation:bob 1.6s ease-in-out infinite}
.hop{animation:hop .55s ease-in-out infinite}
.walk{animation:walk .7s ease-in-out infinite}
@keyframes bob{50%{transform:translateX(-50%) translateY(-3%)}}
@keyframes hop{50%{transform:translateX(-50%) translateY(-18%)}}
@keyframes walk{0%,100%{transform:translateX(-50%) rotate(-2deg)}50%{transform:translateX(-50%) translateY(-4%) rotate(2deg)}}

.name{position:absolute;left:50%;top:-14%;transform:translateX(-50%);white-space:nowrap;font-size:10px;background:rgba(255,250,242,.9);padding:2px 6px;border-radius:999px;color:var(--ink-soft)}
.name.me{background:var(--yellow);color:var(--ink);font-weight:700;font-size:11px}
.bubble{position:absolute;left:50%;top:-34%;transform:translateX(-50%);white-space:nowrap;background:#fff;border-radius:12px;padding:3px 8px;font-size:11px;box-shadow:var(--shadow);animation:pop .25s ease-out}
.bubble::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes pop{from{transform:translateX(-50%) scale(.5);opacity:0}}

/* HUD */
#hud{position:absolute;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 10px) 10px 0;display:flex;gap:6px;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:5}
.pill{pointer-events:auto;background:rgba(255,250,242,.92);border-radius:999px;padding:7px 12px;box-shadow:var(--shadow);font-size:13px;display:flex;gap:6px;align-items:center;white-space:nowrap}
.pill b{font-family:"Jua",sans-serif;font-size:15px;font-weight:400}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.dot.red{background:var(--red);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.clock{flex-direction:column;gap:0;align-items:center;padding:6px 14px}
.clock small{font-size:11px;color:var(--ink-soft)}
.balance{position:absolute;left:10px;right:10px;top:calc(env(safe-area-inset-top) + 58px);pointer-events:auto}

/* UI 하단 */
#ui{position:absolute;left:0;right:0;bottom:0;padding:0 12px calc(env(safe-area-inset-bottom) + 14px);z-index:6;display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px}
.btn{flex:1;background:var(--paper);border-radius:var(--r);padding:14px 10px;font-size:15px;box-shadow:var(--shadow);font-family:"Jua",sans-serif}
.btn.main{background:var(--yellow);font-size:18px;padding:16px}
.btn.pink{background:var(--pink);color:#fff}
.btn.ghost{background:rgba(255,250,242,.75)}
.btn.small{flex:0 0 auto;padding:12px 14px}
.btn:disabled{opacity:.55}
.btn:active{transform:scale(.97)}
.card{background:rgba(255,250,242,.95);border-radius:22px;padding:14px 16px;box-shadow:var(--shadow)}
.center{text-align:center}
.big{font-family:"Jua",sans-serif;font-size:30px;line-height:1.15}
.huge{font-family:"Jua",sans-serif;font-size:40px;line-height:1.1}
.muted{color:var(--ink-soft);font-size:12px}
.title{font-family:"Jua",sans-serif;font-size:20px;margin:0 0 6px}

/* 로또 용지 (흰 감열지 + 오른쪽 분홍 줄) */
.ticket{position:relative;background:#fff;border-radius:6px;padding:10px 26px 10px 12px;box-shadow:0 4px 12px rgba(0,0,0,.18);font-size:12px;overflow:hidden}
.ticket::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--pink)}
.ticket::after{content:"";position:absolute;top:0;bottom:0;right:0;width:14px;background:var(--pink)}
.ticket .t-head{font-family:"Jua",sans-serif;color:#e0558a;font-size:14px;margin-top:2px}
.ticket .t-nums{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:1px;margin-top:4px}
.mini-ticket{position:absolute;left:12px;top:calc(env(safe-area-inset-top) + 66px);bottom:auto;width:auto;max-width:calc(100% - 24px);transform:rotate(-3deg);z-index:6}
.mini-ticket .t-nums{white-space:nowrap}

/* 공 */
.ball{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:38px;height:38px;color:#fff;font-family:"Jua",sans-serif;font-size:17px;text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:inset -4px -5px 8px rgba(0,0,0,.18),inset 4px 4px 8px rgba(255,255,255,.45),0 3px 6px rgba(0,0,0,.25)}
.b1{background:var(--yellow)}.b2{background:var(--blue)}.b3{background:var(--red)}.b4{background:var(--gray)}.b5{background:var(--green)}
.ball.drop{animation:drop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{from{transform:translateY(-60px) scale(.3);opacity:0}}

/* 추첨 화면 전광판 */
.screen{position:absolute;left:24%;right:24%;top:13%;height:12%;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:center}
.screen .ball{width:34px;height:34px;font-size:15px}

/* 모달 */
#modal{position:absolute;inset:0;z-index:20;background:rgba(40,25,20,.45);display:flex;align-items:flex-end;justify-content:center}
#modal[hidden]{display:none}
.sheet{width:100%;max-height:86%;overflow:auto;background:var(--paper);border-radius:26px 26px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom) + 16px);animation:up .25s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.omr{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.omr button{aspect-ratio:1;border-radius:10px;background:#fff;border:1.5px solid #f2b8cb;color:#d6457c;font-family:"Jua",sans-serif;font-size:15px}
.omr button.on{background:#d6457c;color:#fff}
input[type=number],textarea{width:100%;font:inherit;font-size:18px;padding:12px;border-radius:14px;border:2px solid #f0dcc6;background:#fff;color:var(--ink)}
textarea{font-size:16px;resize:none;height:110px}

/* 상점 */
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shop-card{background:rgba(255,250,242,.95);border-radius:22px;padding:16px 10px;box-shadow:var(--shadow);text-align:center;font-family:"Jua",sans-serif;font-size:17px}
.shop-card span{display:block;font-size:34px;margin-bottom:4px}
.items{display:flex;flex-direction:column;gap:8px;max-height:40dvh;overflow:auto;padding:2px}
.item{display:flex;gap:10px;align-items:center;background:rgba(255,250,242,.96);border-radius:18px;padding:10px 12px;box-shadow:var(--shadow);text-align:left}
.item .em{font-size:28px}
.item .nm{font-family:"Jua",sans-serif;font-size:16px}
.item .sb{font-size:11px;color:var(--ink-soft)}
.item .pr{margin-left:auto;font-family:"Jua",sans-serif;font-size:15px;white-space:nowrap;text-align:right}
.item.no{opacity:.6}
.tax{font-size:11px;color:#b5562f;background:#fff1e6;border-radius:10px;padding:6px 8px;margin-top:8px}
.speech{position:absolute;left:8%;right:8%;top:calc(env(safe-area-inset-top) + 118px);background:#fff;border-radius:18px;padding:10px 14px;box-shadow:var(--shadow);font-size:14px;z-index:4}

/* 연출 */
.stamp{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-12deg);border:5px solid var(--red);color:var(--red);font-family:"Jua",sans-serif;font-size:34px;padding:6px 16px;border-radius:12px;background:rgba(255,255,255,.85);z-index:30;animation:stamp .35s cubic-bezier(.3,1.8,.5,1) both;pointer-events:none;white-space:nowrap}
@keyframes stamp{from{transform:translate(-50%,-50%) rotate(-12deg) scale(2.4);opacity:0}}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.float{position:absolute;pointer-events:none;font-size:22px;animation:floatup 1.6s ease-out forwards;z-index:9}
@keyframes floatup{to{transform:translateY(-120px);opacity:0}}
.confetti{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:fall linear forwards;z-index:3}
@keyframes fall{to{transform:translateY(110dvh) rotate(720deg)}}
.petal{position:absolute;top:-20px;font-size:16px;animation:petal linear infinite;z-index:3}
@keyframes petal{to{transform:translate(-60px,110dvh) rotate(360deg)}}
.moth{position:absolute;font-size:20px;filter:grayscale(1);animation:moth 3s ease-out forwards;z-index:9}
@keyframes moth{to{transform:translate(var(--dx),-180px) rotate(20deg);opacity:0}}
.taxbox{position:absolute;right:8%;top:30%;background:#d9a066;color:#fff;font-family:"Jua",sans-serif;border-radius:10px;padding:10px 12px;box-shadow:var(--shadow);z-index:4}
.cash{position:absolute;font-size:28px;z-index:8;transition:transform 1.1s cubic-bezier(.5,-.3,.6,1),opacity 1.1s}
.passbook{background:#3f8f62;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.passbook .ln{display:flex;justify-content:space-between;font-size:13px;border-bottom:1px dashed rgba(255,255,255,.35);padding:5px 0}
.passbook .ln b{font-family:"Jua",sans-serif;font-size:16px;font-weight:400}
.wall{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:40dvh;overflow:auto}
.note{background:#fff7b8;border-radius:4px;padding:10px;font-size:13px;box-shadow:0 3px 6px rgba(0,0,0,.15);min-height:70px}
.note:nth-child(3n+1){background:#ffd9e6;transform:rotate(-1.5deg)}
.note:nth-child(3n+2){background:#d8f1ff;transform:rotate(1deg)}
.note.mine{outline:3px solid var(--yellow)}
.note small{display:block;color:var(--ink-soft);margin-top:6px;font-size:11px}
/* 간판이 오른쪽으로 살짝 내려가 있고(약 3.8°) 오른쪽이 조금 더 가까움 → 글자도 같은 각도로 */
.sign-text{position:absolute;font-family:"Jua",sans-serif;color:#ffe36e;text-shadow:0 .3cqw 0 #23533b;white-space:nowrap;
  transform:translate(-50%,-50%) perspective(60cqw) rotateY(-9deg) skewY(3.8deg);z-index:1;pointer-events:none;font-size:7cqw;letter-spacing:.5cqw}
.sprite.tap{pointer-events:auto;cursor:pointer}
.sprite.tap img{pointer-events:auto}
.sprite.clap{animation:clap .6s ease-in-out}
@keyframes clap{20%,60%{transform:translateX(-50%) rotate(-6deg) scale(1.04)}40%,80%{transform:translateX(-50%) rotate(6deg) scale(1.04)}}
.sprite.jump{animation:jumpup .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes jumpup{40%{transform:translateX(-50%) translateY(-35%)}}
.shop-card.wide{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px}
.shop-card.wide span{display:inline;font-size:24px;margin:0}
input[type=text]{width:100%;font:inherit;font-size:17px;padding:12px;border-radius:14px;border:2px solid #f0dcc6;background:#fff;color:var(--ink)}
.qr{display:inline-block;padding:10px;background:#fff;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.qr img,.qr canvas{display:block}
/* 가게 누르기 */
.shop-hot{position:absolute;left:29%;top:34%;width:62%;height:32%;background:transparent;border-radius:12px;z-index:2;cursor:pointer}
.shop-hot:active{background:rgba(255,230,120,.18)}
.shop-hint{position:absolute;left:58%;top:49.5%;transform:translateX(-50%);background:var(--yellow);color:var(--ink);font-family:"Jua",sans-serif;
  font-size:3.4cqw;padding:1cqw 2.6cqw;border-radius:999px;box-shadow:var(--shadow);white-space:nowrap;z-index:3;pointer-events:none;animation:hint 1.4s ease-in-out infinite}
@keyframes hint{50%{transform:translateX(-50%) translateY(-1.2cqw)}}
/* 걸어다니기 */
.sprite.walking{animation:walk .45s ease-in-out infinite}
.sprite.flip img{transform:scaleX(-1)}
/* 줄서기 */
.queue{background:#fff;border-radius:16px;padding:12px;margin-top:6px}
.q-line{display:flex;align-items:flex-end;gap:2px;height:64px;overflow:hidden;justify-content:flex-end;flex-direction:row-reverse}
.q-line img{height:56px;width:auto;flex:0 0 auto}
.q-line img.me{height:62px;filter:drop-shadow(0 0 4px var(--yellow))}
.q-info{display:flex;justify-content:space-between;margin-top:8px;font-size:14px}
.q-info b{font-family:"Jua",sans-serif;font-size:18px;font-weight:400}
.q-bar{height:10px;background:#f0dcc6;border-radius:9px;margin-top:8px;overflow:hidden}
.q-bar div{height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--red));transition:width .25s linear}
.row.wrap{flex-wrap:wrap}
.row.wrap .btn{flex:1 1 30%}
.top-stack{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 64px);display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:6}
.top-stack .ticket{transform:rotate(-2deg)}
.top-stack .ticket .t-nums{white-space:nowrap}
.remind{display:flex;align-items:center;gap:10px;padding:10px 12px;width:100%}
.remind b{font-size:16px;font-weight:400}
.remind .muted{font-size:11px;line-height:1.35}
.remind .btn{flex:0 0 auto;text-decoration:none;font-size:13px;padding:10px 12px;background:var(--yellow)}
.dot.off{background:var(--gray)}
.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.char-card{background:#fff;border-radius:18px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);border:3px solid transparent}
.char-card img{height:110px;width:auto;margin-bottom:4px}
.char-card b{font-size:17px;font-weight:400}
.char-card span{font-size:11px}
.char-card.cur{border-color:var(--yellow)}
.servers button:disabled{opacity:.45}
.pill.donate{font-family:"Jua",sans-serif;font-size:12px;padding:6px 11px;color:#d6457c}
.notice{font-size:12px;color:#8a4b2f;background:#fff1e6;border-radius:10px;padding:6px 8px;margin:4px 0 8px}
/* 추첨 전광판 안쪽 화면: 월드 기준 가로 30.5~69.6%, 세로 15.4~29.4% → 공 3개씩 두 줄 */
.screen{left:30.5%;right:30.4%;top:15.4%;height:14%;display:grid;grid-template-columns:repeat(3,9cqw);grid-template-rows:repeat(2,9cqw);
  gap:3cqw 3.5cqw;justify-content:center;align-content:center;flex-wrap:nowrap}
.screen .ball{width:9cqw;height:9cqw;font-size:4.4cqw}
.name{font-size:max(9px,2.3cqw)}
.album{display:flex;flex-wrap:wrap;gap:6px;max-height:22dvh;overflow:auto}
.album span{background:#fff;border-radius:999px;padding:5px 10px;font-size:12px;box-shadow:0 2px 5px rgba(0,0,0,.1)}
#toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);background:rgba(60,40,30,.9);color:#fff;padding:10px 16px;border-radius:14px;font-size:14px;z-index:40;max-width:85%;text-align:center}
#toast[hidden]{display:none}
.servers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.servers button{background:#fff;border-radius:14px;padding:12px;text-align:left;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.servers button.cur{outline:3px solid var(--yellow)}
.fade-in{animation:fadein .5s ease-out}
@keyframes fadein{from{opacity:0}}