*{box-sizing:border-box}
html,body{
margin:0;min-height:100%;font-family:"Malgun Gothic","Noto Sans KR",sans-serif;color:#684a37;
background:linear-gradient(#77d1ff 0 23%,#d2f0ff 24% 38%,#bceba2 39% 100%);
-webkit-text-size-adjust:100%;overscroll-behavior-y:contain
}
body{
padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
padding-bottom:env(safe-area-inset-bottom)
}
button{font:inherit}
.preview{position:sticky;top:0;z-index:9999;background:#204a31;color:#fff;text-align:center;padding:8px 10px;font-weight:900;font-size:14px}
.game{width:min(100%,900px);max-width:900px;margin:auto;padding:clamp(6px,1.4vw,12px) clamp(4px,1.2vw,10px) calc(42px + env(safe-area-inset-bottom))}

/* V7-style header: actual 778x279 art, no screenshot scaling beyond container width */
.header{
  position:relative;width:100%;aspect-ratio:778/279;border-radius:30px;overflow:hidden;
  background:url("../images/block-pop/ba92c12ce6.webp") center/100% 100% no-repeat;
  box-shadow:0 14px 28px #3c563d22;
}
.soundBtn{
  position:absolute;right:1.8%;bottom:3.2%;width:43px;height:43px;border:0;border-radius:50%;
  background:#fff8ef;color:#bd5075;font-size:21px;box-shadow:0 4px 0 #d89aad;cursor:pointer
}

.progress{margin:10px 2% 13px;display:grid;grid-template-columns:44px 1fr 66px;gap:9px;align-items:center;background:#fffaf1ed;border:2px solid #fff;border-radius:999px;padding:8px 12px;box-shadow:0 5px 14px #40664a16}
.progressIcon{width:36px;height:36px;background-image:url("../images/block-pop/dc2fd25c13.webp");background-repeat:no-repeat;background-size:calc(1280px * .140625) calc(1792px * .140625);/* 36/256 */ background-position:0 0}
.track{height:17px;border-radius:999px;background:#dfd1bd;border:2px solid #cbb497;overflow:hidden}
.fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ffe36a,#ffb55d,#ff75aa,#aa8cff);transition:width .35s}
.progressText{font-weight:900;text-align:right}

.boardShell{
  position:relative;background:linear-gradient(180deg,#71809e,#4d5974);
  border:6px solid #dce9ee;border-radius:31px;padding:9px;overflow:hidden;
  box-shadow:inset 0 0 0 2px #fff5,0 17px 31px #30415535
}
.boardShell:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 13%,#fff1 0 12%,transparent 13%),radial-gradient(circle at 81% 76%,#fff1 0 16%,transparent 17%),linear-gradient(180deg,#fff1,transparent 24%,#0001)}
canvas{
position:relative;z-index:2;display:block;width:100%;height:auto;aspect-ratio:6/7;
touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none
}
#gameCanvas{cursor:pointer}
.hint{width:max-content;max-width:96%;margin:11px auto 0;background:#fff;border:3px solid #bbe3c1;border-radius:999px;padding:10px 17px;color:#3e7048;font-weight:900;font-size:16px;box-shadow:0 8px 18px #315f3e18}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.rule{background:#fff8f5;border:2px solid #ffd0df;border-radius:20px;text-align:center;padding:8px 4px;box-shadow:0 6px 12px #00000009}
.rule .item{height:58px;display:flex;align-items:center;justify-content:center}
.rule canvas{width:58px;height:58px;aspect-ratio:1}
.rule b{display:block;color:#df557f;font-size:14px}.rule small{display:block;color:#806868;font-size:11px;font-weight:700}

.overlay{position:fixed;inset:0;z-index:10000;background:#27433870;display:none;align-items:center;justify-content:center;padding:18px}.overlay.show{display:flex}
.modal{width:min(420px,92vw);background:#fff9f5;border:5px solid #ffd3e0;border-radius:30px;text-align:center;padding:22px;box-shadow:0 25px 70px #0003}
.modal h2{font-size:36px;color:#ef5986;margin:0}.modal p{font-size:19px}.modal button{border:0;border-radius:18px;background:linear-gradient(#ff8caf,#ff638e);color:white;font-size:19px;font-weight:900;padding:12px 20px;box-shadow:0 5px 0 #c84269;cursor:pointer}

@media(max-width:650px){
 .preview{font-size:11px;padding:6px 8px}
 .game{padding:6px 3px calc(28px + env(safe-area-inset-bottom))}
 .header{border-radius:18px}
 .soundBtn{width:36px;height:36px;font-size:18px;right:1.5%;bottom:2.3%;min-width:36px;min-height:36px}
 .progress{grid-template-columns:31px 1fr 51px;padding:7px 9px;margin:7px 1.5% 10px}
 .progressIcon{width:27px;height:27px}.track{height:14px}.progressText{font-size:13px}
 .boardShell{padding:4px;border-width:4px;border-radius:20px}
 .hint{font-size:13px;padding:8px 11px;margin-top:9px}
 .rules{gap:4px;margin-top:9px}.rule{padding:5px 2px;border-radius:14px}.rule .item{height:43px}.rule canvas{width:43px;height:43px}.rule b{font-size:11px}.rule small{font-size:9px}
}
@media(min-width:651px) and (max-width:1100px){
 .game{width:min(96vw,900px)}
 .soundBtn{min-width:44px;min-height:44px}
}
@media(orientation:landscape) and (max-height:650px){
 .preview{position:relative}
 .game{width:min(760px,92vw)}
 .header{border-radius:20px}
 .progress{margin-top:7px;margin-bottom:9px}
 .hint{margin-top:8px}
}
@media(pointer:coarse){
 .soundBtn,.modal button{min-width:44px;min-height:44px}
 .rule{user-select:none}
}


/* ===== Child-friendly transparent PNG hand pointer ===== */
.handCursor{
  position:fixed;left:0;top:0;width:118px;height:auto;z-index:20050;
  pointer-events:none;opacity:0;transform:translate3d(-300px,-300px,0);
  transition:opacity .12s ease;will-change:transform,opacity;
  filter:drop-shadow(0 7px 5px rgba(81,34,39,.23))
}
.handCursor.show{opacity:1}
.handCursor img{display:block;width:100%;height:auto;transform-origin:13% 5%}
.handCursor.press img,.handCursor.tap img{animation:handPress .25s ease-out}
.handCursor:after{
  content:"";position:absolute;left:11px;top:1px;width:34px;height:34px;border-radius:50%;
  border:4px solid rgba(255,112,175,0);box-shadow:0 0 0 0 rgba(255,112,175,0);
  transform:translate(-30%,-28%) scale(.45)
}
.handCursor.press:after,.handCursor.tap:after{animation:handRipple .47s ease-out}
@keyframes handPress{
  50%{transform:scale(.88) rotate(-2deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes handRipple{
  0%{border-color:rgba(255,112,175,.95);box-shadow:0 0 0 0 rgba(255,112,175,.45);transform:translate(-30%,-28%) scale(.45)}
  100%{border-color:rgba(255,112,175,0);box-shadow:0 0 0 19px rgba(255,112,175,0);transform:translate(-30%,-28%) scale(1.32)}
}
@media(pointer:fine){.game,.game *{cursor:none!important}}
@media(max-width:650px){.handCursor{width:96px}}

/* ===== Header HUD: one fixed logical coordinate system ===== */
.headerHud{
  position:absolute;inset:0;width:100%;height:100%;z-index:4;
  pointer-events:none;overflow:visible
}
.headerHud .goal-pill{
  fill:#914b26;stroke:#713817;stroke-width:2;
  filter:drop-shadow(0 2px 2px rgba(76,39,23,.22))
}
.headerHud .goal-text{
  fill:#fff;font-weight:900;font-family:"Malgun Gothic","Noto Sans KR",sans-serif;
  font-size:31px;text-anchor:middle;dominant-baseline:middle
}
.headerHud .moves-outer{fill:#f57fa7;stroke:#fff7fb;stroke-width:7}
.headerHud .moves-inner{fill:#fff0f6;stroke:#ffb4cc;stroke-width:5}
.headerHud .moves-label{
  fill:#ae3f63;font-weight:900;font-family:"Malgun Gothic","Noto Sans KR",sans-serif;
  font-size:17px;text-anchor:middle
}
.headerHud .moves-number{
  fill:#f04f81;font-weight:900;font-family:"Malgun Gothic","Noto Sans KR",sans-serif;
  font-size:49px;text-anchor:middle;dominant-baseline:middle
}
.pop-toolbar-home{color:inherit;text-decoration:none;margin-right:16px;padding:4px 8px;border:1px solid #ffffff80;border-radius:8px}