html,body{margin:0;height:100%;background:#0d1a24;overflow:hidden}
body{min-height:100svh;display:grid;place-items:center}
.frame{position:relative;aspect-ratio:16/9;background:#0d1a24}
.frame > img:first-child{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none}
.hot{position:absolute;border:0;padding:0;margin:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hot.start{left:50%;top:84.5%;width:28%;height:11%;transform:translate(-50%,-50%)}
.hot.sound{left:87%;top:8.4%;width:5.6%;height:10%;transform:translate(-50%,-50%)}
.hot.help{left:93.3%;top:8.4%;width:5.6%;height:10%;transform:translate(-50%,-50%)}
.hot.back{left:7.2%;top:8.6%;width:9%;height:10%;transform:translate(-50%,-50%)}
.hot.mic{left:87.5%;top:84.5%;width:11%;height:18%;transform:translate(-50%,-50%)}
.hot.cell{transform:none}
.hot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hot.is-press{filter:brightness(1.18)}
.hot:not(.cell).is-shake{animation:sian-shake-c .42s ease}
.hot.cell.is-shake{animation:sian-shake-cell .42s ease}
.hot.is-pulse{animation:sian-pulse .7s ease}
@keyframes sian-shake-c{
  20%{transform:translate(calc(-50% + 7px),-50%)}
  40%{transform:translate(calc(-50% - 7px),-50%)}
  60%{transform:translate(calc(-50% + 4px),-50%)}
  80%{transform:translate(calc(-50% - 3px),-50%)}
}
@keyframes sian-shake-cell{
  20%{transform:translateX(8px)}
  40%{transform:translateX(-8px)}
  60%{transform:translateX(5px)}
  80%{transform:translateX(-3px)}
}
@keyframes sian-pulse{
  0%,100%{filter:brightness(1)}
  40%{filter:brightness(1.35) saturate(1.2)}
}
.sian-spark{
  position:absolute;z-index:8;width:0;height:0;pointer-events:none;
  transform:translate(-50%,-50%)
}
.sian-spark i{
  position:absolute;left:0;top:0;width:10px;height:10px;
  margin:-5px 0 0 -5px;border-radius:50%;
  background:#fff4a8;box-shadow:0 0 10px #ffe36a;
  animation:sian-dot .55s ease-out forwards
}
.sian-spark-no i{background:#ffd0d0;box-shadow:0 0 8px #ff8a8a}
@keyframes sian-dot{
  to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
}
.sian-wheel{
  position:absolute;left:31%;top:12%;width:38% !important;height:auto !important;
  aspect-ratio:1;object-fit:contain;pointer-events:none;z-index:2;
  transform-origin:50% 50%;
  clip-path:circle(46% at 50% 52%);
  filter:drop-shadow(0 8px 14px rgba(40,20,0,.18))
}
.sian-wheel.is-spin{animation:sian-spin 1.55s cubic-bezier(.12,.75,.12,1) forwards}
@keyframes sian-spin{to{transform:rotate(1300deg)}}
.sian-say{
  position:absolute;z-index:3;margin:0;display:grid;place-items:center;
  font:700 clamp(16px,2.6vmin,26px)/1.2 "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:#3a2a18;text-align:center;pointer-events:none;
  text-shadow:0 1px 0 #fff8e8
}
.sian-tip{
  position:absolute;z-index:4;left:50%;top:78%;width:44%;margin:0;padding:.35em .4em;
  display:none;place-items:center;transform:translate(-50%,-50%);
  font:700 clamp(14px,2.2vmin,22px)/1.3 "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:#3a2a18;text-align:center;pointer-events:none;
  text-shadow:0 1px 0 #fff8e8
}
.sian-tip.is-on{display:grid}
.sian-day{
  position:absolute;z-index:3;margin:0;
  font:700 clamp(12px,1.8vmin,18px)/1 "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:#3a2a18;text-align:center;pointer-events:none;
  text-shadow:0 1px 0 #fff8e8
}
.hot .sian-pick{
  position:absolute;left:8%;right:8%;bottom:6%;height:22%;
  display:grid;place-items:center;
  font:700 clamp(13px,2vmin,20px)/1.1 "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:#3a2a18;pointer-events:none;text-shadow:0 1px 0 #fff8e8
}
@media (min-width:900px){
  .frame{width:min(100vw,calc(100svh * 16 / 9));height:auto}
}
@media (max-width:899px){
  .frame{position:absolute;top:50%;left:50%;height:100svh;width:calc(100svh * 16 / 9);max-width:none;transform:translate(-50%,-50%)}
}
/* 모바일 세로 홈: <img data-m="./sian-main-m.webp"> 가 있는 페이지만 세로 시안(941x1672)으로 교체 */
@media (max-width:899px) and (orientation:portrait){
  html.sian-m .frame.has-m,
  .frame.frame-m{position:relative;top:auto;left:auto;transform:none;max-width:none;width:min(100vw,calc(100svh * 941 / 1672));height:auto;aspect-ratio:941/1672}
  html.sian-m .frame.has-m .hot.start,
  .frame.frame-m .hot.start{left:50%;top:88%;width:72%;height:15%}
  html.sian-m .frame.has-m .hot.sound,
  .frame.frame-m .hot.sound{left:10.5%;top:6%;width:15%;height:9%}
  html.sian-m .frame.has-m .hot.help,
  .frame.frame-m .hot.help{left:90%;top:6%;width:15%;height:9%}
}

/* Portrait: keep the complete illustration and provide reachable 44px controls. */
.mobile-actions{display:none}
@media(max-width:899px) and (orientation:portrait){
 html:has(body.mobile-actions-page){height:auto;overflow-y:auto;overflow-x:hidden}
 body.mobile-actions-page{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;overflow:visible;background:#f7efdf;color:#3a2a18}
 .mobile-actions-page .frame{position:relative;inset:auto;transform:none;width:100%;height:auto;aspect-ratio:16/9;flex-shrink:0}
 .mobile-actions{display:block;box-sizing:border-box;width:100%;padding:18px max(18px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-bottom));font:600 16px/1.6 system-ui,sans-serif}
 .mobile-actions h1{font-size:22px;margin:0 0 12px}.mobile-actions p{margin:0 0 16px;white-space:pre-line}
 .mobile-actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .mobile-actions button{min-height:48px;padding:12px;border:2px solid #d1b98e;border-radius:14px;background:#fffaf0;color:#493116;font:700 16px/1.4 system-ui;touch-action:manipulation;overflow-wrap:anywhere}
 .mobile-actions button:disabled{opacity:.5}.mobile-actions button[aria-pressed=true]{background:#f8d282}.mobile-actions button:focus-visible{outline:3px solid #256a9b;outline-offset:2px}
 .mobile-actions button.is-shake{animation:sian-shake-cell .42s ease}
}
@media(max-width:899px) and (orientation:landscape){.frame{position:relative;inset:auto;transform:none;width:min(100vw,calc(100svh * 16 / 9));height:auto}}

/* Separate navigation from game choices on narrow screens. */
@media(max-width:899px) and (orientation:portrait){
 .mobile-actions-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px}
 .mobile-actions-toolbar button{font-size:14px;padding:8px 4px;min-height:44px;border-radius:12px}
 .mobile-actions-grid button:last-child:nth-child(odd){grid-column:1/-1}
 .mobile-actions{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .mobile-actions-page .frame .sian-say,.mobile-actions-page .frame .sian-tip,.mobile-actions-page .frame .quiz-note{visibility:hidden}
}