/* 게임 화면. 색과 바닥은 theme.css. 게임 그림(타이틀, 오락기, 무대)은 밝은/어두운 모드와 상관없이 같은 색이다 */
html,body{height:100%}
body{overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.app{height:100%;max-width:540px;margin:0 auto;display:flex;flex-direction:column}
:root{
  --ring:4px 0 #5A2E1A,-4px 0 #5A2E1A,0 4px #5A2E1A,0 -4px #5A2E1A,3px 3px #5A2E1A,-3px 3px #5A2E1A,
    3px -3px #5A2E1A,-3px -3px #5A2E1A,0 9px #5A2E1A;
  --art-line:#5A2E1A;
}

/* 위: 보기만 하는 영역 */
.hud{display:flex;align-items:center;gap:10px;padding:10px 14px;flex:none}
/* 위쪽은 용돈 하나만, 크게 */
.wallet{display:flex;align-items:center;gap:10px;background:var(--chip);color:#fff;border-radius:999px;
  padding:5px 22px 5px 5px;font-size:34px;line-height:1;box-shadow:0 5px 0 var(--shadow)}
.wallet.bump{animation:bump .3s ease-out}
.coin{width:46px;height:46px;border-radius:50%;background:var(--gloss),var(--gold);border:3px solid var(--art-line);
  display:grid;place-items:center;font-size:21px;color:#4A2A1A;flex:none}
#view{flex:1;min-height:0;padding:4px 14px 14px;display:flex;flex-direction:column}

/* 아래: 버튼 두 개 (모든 화면 공통). 바닥은 할머니 몸빼 꽃무늬 */
.pad{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 12px 16px;
  border-top:4px solid var(--line);border-radius:26px 26px 0 0;background-color:var(--bar);
  background-image:
    radial-gradient(circle at 12px 14px,#FFC629 0 3px,transparent 3.5px),
    radial-gradient(circle at 12px 14px,#E8452C 0 8px,transparent 8.5px),
    radial-gradient(circle at 44px 40px,#FFF3CC 0 2.5px,transparent 3px),
    radial-gradient(circle at 44px 40px,#F28C1E 0 7px,transparent 7.5px),
    radial-gradient(circle at 40px 10px,#3FA35B 0 4px,transparent 4.5px),
    radial-gradient(circle at 14px 46px,#3F7FD1 0 5px,transparent 5.5px);
  background-size:60px 60px}
/* 입체 버튼: 윗면(::before)과 두꺼운 옆면(::after)을 겹친 사탕 버튼. 누르면 윗면이 옆면 높이만큼 내려간다 */
.pad{padding-bottom:28px}
.pad button{
  --top:#FF7479;--face:#E5343B;--side:#A81C28;
  position:relative;z-index:0;background:transparent;border:0;
  font-family:inherit;cursor:pointer;min-height:120px;border-radius:30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:30px;line-height:1.1;padding:10px 8px 16px;
  transform:translateY(0);transition:transform .07s ease-out;
}
.pad button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:30px;border:4px solid var(--art-line);
  background:
    radial-gradient(ellipse 72% 34% at 50% 16%,rgba(255,255,255,.8),rgba(255,255,255,0) 72%),
    radial-gradient(circle at 18% 22%,#fff 0 5px,transparent 6px),
    linear-gradient(var(--top),var(--face) 55%);
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.14),inset 0 0 0 3px rgba(255,255,255,.28)}
.pad button::after{content:"";position:absolute;left:0;right:0;top:14px;bottom:-14px;z-index:-2;border-radius:30px;
  border:4px solid var(--art-line);background:linear-gradient(var(--side),var(--side) 70%,rgba(0,0,0,.25));
  box-shadow:0 7px 0 rgba(0,0,0,.28);transition:top .07s ease-out,bottom .07s ease-out}
.pad button .ic{font-size:48px;line-height:1;min-height:54px;display:grid;place-items:center;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.pad #L{color:#fff;text-shadow:3px 0 #7A0F18,-3px 0 #7A0F18,0 3px #7A0F18,0 -3px #7A0F18,2px 2px #7A0F18,-2px 2px #7A0F18,
  2px -2px #7A0F18,-2px -2px #7A0F18,0 5px #7A0F18}
.pad #R{--top:#FFE37A;--face:#FFC629;--side:#C98A00;color:#4A2A1A;
  text-shadow:2px 0 #FFF4C4,-2px 0 #FFF4C4,0 2px #FFF4C4,0 -2px #FFF4C4}
.pad button:active,.pad button.down{transform:translateY(12px)}
.pad button:active::after,.pad button.down::after{top:2px;bottom:-2px;box-shadow:0 3px 0 rgba(0,0,0,.28)}
.pad button:focus-visible{outline:none}
.pad button:focus-visible::before{box-shadow:0 0 0 5px #fff,inset 0 -10px 0 rgba(0,0,0,.14)}

/* 뿅망치 (할머니가 든 것과 같은 빨간 망치) */
/* 뿅망치 그림 (assets/hammer.webp) */
.ph{display:block;height:58px;width:auto}

/* 공통: 게임 그림이 들어가는 액자, 빙글빙글 햇살 */
.frame{flex:1;min-height:0;position:relative;overflow:hidden;border:4px solid var(--art-line);border-radius:26px;
  box-shadow:0 7px 0 var(--shadow)}
.rays{position:absolute;left:50%;top:50%;width:240%;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(#FFD55A 0 10deg,#FFE9A0 10deg 20deg);
  transform:translate(-50%,-50%);animation:spin 50s linear infinite}

/* ── 타이틀 ── */
.title{background:#FFE38A;display:flex;flex-direction:column;align-items:center;color:#4A2A1A}
.logo{position:relative;z-index:1;flex:none;margin-top:16px;display:flex;flex-direction:column;align-items:center;
  line-height:1.05;transform:rotate(-4deg)}
.logo span{display:block;text-shadow:var(--ring);animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
/* 타이틀 글자: 폰 폭에 맞춰 최대한 크게 ("게임중독" 네 글자가 한 줄에 들어가는 크기까지) */
.logo .l1{font-size:min(36px,9vw);color:#fff;margin-bottom:8px}
.logo .l2{font-size:min(72px,17vw);color:#FFC629;animation-delay:.1s}
.logo .l3{font-size:min(92px,20.5vw);color:#FF5A5F;animation-delay:.25s}
.logo .l4{font-size:min(56px,13vw);color:#fff;animation-delay:.4s;margin-top:6px}
.logo .l3,.logo .l2{text-shadow:6px 0 #5A2E1A,-6px 0 #5A2E1A,0 6px #5A2E1A,0 -6px #5A2E1A,4px 4px #5A2E1A,-4px 4px #5A2E1A,
  4px -4px #5A2E1A,-4px -4px #5A2E1A,0 12px #5A2E1A}
.hero{position:relative;z-index:1;flex:1 1 0;min-height:0;width:88%;object-fit:contain;object-position:50% 50%;
  transform-origin:50% 100%;animation:bob 1.4s ease-in-out infinite;margin:6px 0}
div.hero svg{width:100%;height:100%;display:block}
/* 타이틀: 로고와 안내 글 사이 빈 곳의 정가운데에 할머니를 둔다. 키가 너무 커지지 않게 막는다 */
.title .hero{margin:10px 0 62px;max-height:420px;align-self:center}
.title{justify-content:center}
.press{position:absolute;z-index:2;left:0;right:0;bottom:12px;margin:0 auto;width:max-content;background:#4A2A1A;color:#fff;
  border-radius:999px;padding:6px 20px;font-size:27px;animation:blink 1s steps(2) infinite}

/* ── 오락실: 진짜 오락기 ── */
/* 게임 제목: 타이틀 화면 로고와 같은 꾸밈. 한 줄을 통째로 쓴다 (크기는 game.js에서 글자 수로 정한다) */
.gtitle{flex:none;text-align:center;line-height:1.1;margin:2px 0 14px;white-space:nowrap;color:#FF5A5F;
  text-shadow:6px 0 #5A2E1A,-6px 0 #5A2E1A,0 6px #5A2E1A,0 -6px #5A2E1A,4px 4px #5A2E1A,-4px 4px #5A2E1A,
    4px -4px #5A2E1A,-4px -4px #5A2E1A,0 12px #5A2E1A}
.gtitle span{display:inline-block;transform:rotate(-3deg);animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
/* 오락기는 얇은 자주색 틀 하나 */
.cab{flex:1;min-height:0;display:flex;flex-direction:column;text-align:center;background:#8A2040;
  border:4px solid var(--art-line);border-radius:26px;padding:8px;
  box-shadow:inset 0 0 0 3px #B8375A,0 8px 0 var(--shadow)}
.scr{flex:1;min-width:0;min-height:0;position:relative;overflow:hidden;border-radius:12px;
  display:flex;flex-direction:column;justify-content:center;gap:12px;padding:14px;
  background:radial-gradient(circle at 50% 60%,#FFFDF2 0 35%,#FFE08A 100%);color:#4A2A1A;font-size:34px;line-height:1.2}
.scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(rgba(90,46,26,.05) 0 2px,transparent 2px 5px)}
/* 설명: 빨간 버튼이 하는 일, 노란 버튼이 하는 일을 버튼과 같은 색으로 크게 보여 준다 */
.rule{display:flex;align-items:center;gap:10px;border:4px solid var(--art-line);border-radius:20px;padding:12px;
  text-align:left;box-shadow:inset 0 -7px 0 rgba(0,0,0,.16)}
.rule.L{background:var(--gloss),#E5343B;color:#fff;text-shadow:0 2px 0 #A81C28}
.rule.R{background:var(--gloss),#FFC629;color:#4A2A1A}
.rule .ri{flex:none;width:64px;min-height:60px;display:grid;place-items:center;font-size:46px;font-style:normal;line-height:1}
.rule span{flex:1}
.scr .line{text-align:center}
.scr{justify-content:safe center;overflow:auto}
/* 키가 작은 폰: 버튼이 두꺼워진 만큼 오락기 안을 조금 줄인다 (글씨는 24px 아래로 내리지 않는다) */
@media (max-height:760px){
  .gtitle{margin-bottom:10px}
  .scr{font-size:28px;gap:8px;padding:10px}
  .rule{padding:8px 10px;border-radius:16px}
  .rule .ri{width:52px;min-height:46px;font-size:38px}
  .rule .ri .ph{height:46px}
  .scr .ins{font-size:24px}
  .pager{margin-top:8px}
}
.scr .ins{text-align:center;font-size:28px;color:#8A2040;margin-top:4px;animation:blink 1s steps(2) infinite}
.pager{display:flex;justify-content:center;gap:10px;margin-top:14px}
.pager i{width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 3px 0 var(--shadow)}
.pager i.f{background:var(--red)}
.swap{animation:swap .25s ease-out}

/* ── 게임 무대: 할머니 집 마당 ── */
.stage{--feet:90px;background:#8FC8F0 url(assets/yard-v.webp) 50% 100%/cover no-repeat}
.stage.shake{animation:shk .3s linear}
.bubble{position:absolute;left:8px;right:8px;top:8px;background:#fff;color:#4A2A1A;border:4px solid var(--art-line);
  border-radius:22px;padding:8px 12px;text-align:center;font-size:30px;line-height:1.2;z-index:6;min-height:96px;
  display:flex;flex-direction:column;justify-content:center}
.bubble::after{content:"";position:absolute;left:22%;bottom:-17px;width:26px;height:26px;background:#fff;
  border-right:4px solid var(--art-line);border-bottom:4px solid var(--art-line);transform:rotate(45deg) skew(12deg,12deg)}
.bubble small{font-size:24px;color:#8A6A58}
.bubble.popin{animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.me{position:absolute;right:1%;bottom:var(--feet);height:calc(44% * var(--k,1));max-height:calc(min(300px,60vw) * var(--k,1));width:auto;z-index:3;
  transform-origin:50% 100%;animation:bob 1.6s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(90,46,26,.22))}
div.me{aspect-ratio:120/170}
div.me svg{width:100%;height:100%;display:block;overflow:visible}
.me.swing{animation:swing .45s ease-out}
.me.give{animation:give .45s ease-out}
.who{position:absolute;left:5%;bottom:var(--feet);height:42%;max-height:min(280px,56vw);z-index:2;
  display:flex;align-items:flex-end;transform-origin:50% 100%;transition:transform 3.6s linear}
.who>*{width:auto;display:block;overflow:visible;transform-origin:50% 100%}
.who>img{filter:drop-shadow(0 6px 0 rgba(90,46,26,.22))}
.who.walk>*{animation:waddle .5s ease-in-out infinite}
.who.hop>*{animation:hop .3s ease-in-out infinite}
.who.tumble>*{transform-origin:50% 60%;animation:tumble .8s linear}
.who.nope>*{animation:nope .4s}
.count{position:absolute;left:10px;bottom:8px;font-size:24px;color:#fff;background:#4A2A1A;
  border-radius:999px;padding:2px 12px;z-index:4}
.combo{position:absolute;left:10px;top:128px;z-index:5;font-size:30px;color:#FFC629;text-shadow:var(--ring);
  transform:rotate(-6deg);animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.combo[hidden]{display:none}
.boom{position:absolute;z-index:7;width:132px;height:132px;margin:-66px 0 0 -66px;display:grid;place-items:center;
  pointer-events:none;animation:boom .55s ease-out forwards;
  background:#FF5A1F;clip-path:polygon(50% 0,61% 22%,85% 10%,80% 35%,100% 45%,82% 60%,92% 85%,67% 80%,55% 100%,42% 80%,15% 90%,22% 64%,0 52%,20% 38%,10% 14%,38% 22%)}
.boom::before{content:"";position:absolute;inset:10px;background:#FFD23F;clip-path:inherit}
.boom b{position:relative;font-weight:400;font-size:38px;color:#E5343B;transform:rotate(-10deg)}
.bit{position:fixed;z-index:30;left:0;top:0;pointer-events:none;font-size:28px;line-height:1;will-change:transform}
.bit.plus{font-size:26px;color:#FFC629;text-shadow:var(--ring)}

/* 캐릭터 그림 (임시 벡터). 표정은 m-normal / m-hit / m-happy / m-sad */
.ch .s{fill:none;stroke:#5A2E1A;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ch .e{fill:#3A1710}
.ch .f{display:none}
.ch.m-normal .f-normal,.ch.m-hit .f-hit,.ch.m-happy .f-happy,.ch.m-sad .f-sad{display:inline}

/* ── 결과 ── */
.win{background:#FFE38A;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:14px;color:#4A2A1A}
.win>*{position:relative;z-index:1}
.win .rays{position:absolute;z-index:0}
.ribbon{flex:none;background:var(--gloss),#E5343B;color:#fff;border:4px solid var(--art-line);border-radius:16px;
  padding:4px 24px;font-size:34px;line-height:1.2;text-shadow:0 2px 0 #A81C28;box-shadow:0 5px 0 var(--art-line);
  transform:rotate(-3deg);animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.stars{flex:none;margin-top:10px;font-size:44px;line-height:1;letter-spacing:6px}
.stars i{display:inline-block;font-style:normal;animation:pop .4s cubic-bezier(.3,1.6,.5,1) both}
.stars i:nth-child(2){animation-delay:.2s}.stars i:nth-child(3){animation-delay:.4s}
.stars i.off{filter:grayscale(1);opacity:.35}
.gain{flex:none;font-size:48px;line-height:1.1;color:#fff;text-shadow:var(--ring);margin-top:2px}
.win p{flex:none;margin:8px 0 0;font-size:26px;background:rgba(255,255,255,.8);border-radius:999px;padding:2px 16px}
.win .hero{animation:cheer .45s ease-in-out infinite alternate}

/* ── 저금통 / 정산 ── */
.bank{align-items:center;gap:6px}
.bank .pig{width:120px;height:120px;border-radius:28px;border:4px solid var(--art-line);box-shadow:0 5px 0 var(--shadow);
  animation:bob 1.6s ease-in-out infinite}
.bank .big{font-size:56px;line-height:1.1;color:#FFC629;text-shadow:var(--ring);margin:6px 0 10px}
.bank .big.sm{font-size:40px}
.code{display:flex;gap:10px;justify-content:center;margin:10px 0 14px}
.code i{font-style:normal;width:66px;height:84px;display:grid;place-items:center;font-size:60px;line-height:1;
  background:var(--gloss),#FFC629;color:#4A2A1A;border:4px solid var(--art-line);border-radius:16px;box-shadow:0 6px 0 #D59300;
  animation:pop .4s cubic-bezier(.3,1.6,.5,1) both}
.code i:nth-child(2){animation-delay:.08s}.code i:nth-child(3){animation-delay:.16s}.code i:nth-child(4){animation-delay:.24s}
.code.off i{filter:grayscale(1);opacity:.4}

/* ── 도장판: 흰 둥근 카드 (지금은 안 쓴다. 결과·정산 카드가 같은 .sheet를 쓴다) ── */
.sheet{flex:1;min-height:0;background:var(--card);border-radius:28px;padding:18px;
  display:flex;flex-direction:column;justify-content:center;text-align:center;overflow:auto;box-shadow:0 7px 0 var(--shadow)}
.sheet h2{font-size:32px;margin:6px 0;color:var(--title)}
.sheet p{font-size:26px;margin:6px 0}
.sheet .soft{color:var(--ink-soft);font-size:24px}
.stamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0;
  background:var(--cream);border-radius:20px;padding:12px}
.stp{aspect-ratio:1;border-radius:50%;border:3px dashed var(--ink-soft);display:grid;place-items:center;
  font-size:24px;line-height:1;color:var(--ink-soft)}
.stp.on{border:4px solid var(--stamp);color:var(--stamp);font-size:30px;transform:rotate(-12deg)}
.stp.new{animation:slam .5s ease-out}
.ticket{border:4px solid var(--art-line);border-radius:20px;padding:12px;margin-top:6px;background:var(--gloss),#FFC629;
  color:#4A2A1A;box-shadow:0 4px 0 #D59300}
.ticket h3{font-size:30px;margin:0}
.ticket p{font-size:26px;margin:4px 0 0}

@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pop{from{transform:scale(.2);opacity:0}}
@keyframes bob{50%{transform:translateY(-6px) scale(1.01,.99)}}
@keyframes cheer{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-16px) rotate(3deg)}}
@keyframes blink{50%{opacity:.25}}
@keyframes bulbs{50%{border-color:#FF7A3D}}
@keyframes bump{50%{transform:scale(1.18)}}
@keyframes swap{from{transform:translateX(30px);opacity:.3}to{transform:none;opacity:1}}
@keyframes drift{to{left:110%}}
@keyframes shk{20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-2px)}}
@keyframes waddle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-4px)}}
@keyframes hop{50%{transform:translateY(-22px)}}
@keyframes tumble{to{transform:rotate(-720deg)}}
@keyframes nope{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes swing{0%{transform:rotate(0)}30%{transform:rotate(16deg)}65%{transform:rotate(-22deg) translateX(-10px)}100%{transform:rotate(0)}}
@keyframes give{0%{transform:none}45%{transform:translate(-8px,-14px)}100%{transform:none}}
@keyframes boom{0%{transform:scale(.2) rotate(-25deg)}45%{transform:scale(1.15) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:0}}
@keyframes slam{from{transform:scale(2.2);opacity:0}to{transform:rotate(-12deg);opacity:1}}
@media (prefers-reduced-motion: reduce){*{animation:none!important}}