/* ============================================================
   base.css — shared: variables, reset, frame/canvas, screens,
   gears, twinkle, starfield, section header, nav button, toast
   ============================================================ */
:root{
  --bg:#000;
  --purple:#81a1f5;
  --yellow:#ffe747;
  --green:#35e483;
  --orange:#ff6a3d;
  --chip-orange:#ff8a00;
  --chip-blue:#4a90f5;
  --cream:#efe4c4;
  --cream-dim:#c9bf9f;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:"Gowun Batang",serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* full-bleed phone frame (desktop capped). The 393x852 art canvas is scaled to COVER this. */
.frame{
  position:relative;
  height:100svh;
  width:100%;
  max-width:460px;
  margin:0 auto;
  background:var(--bg);
  overflow:hidden;
  box-shadow:0 0 80px rgba(90,110,190,.15);
}
/* fixed Figma canvas, uniformly scaled (cover) and centered so gears stay perfectly round */
.canvas{
  position:absolute;top:50%;left:50%;
  width:393px;height:852px;
  transform:translate(-50%,-50%) scale(var(--s,1));
  transform-origin:center center;
}

/* ---------- screens ---------- */
.screen{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s ease;
  overflow:hidden;
}
.screen.active{opacity:1;visibility:visible;pointer-events:auto}

/* stage uses % of the 393x852 canvas so Figma coords map 1:1 */
.stage{position:absolute;inset:0}
.stage img{position:absolute;display:block;-webkit-user-drag:none;user-select:none}

.gear{
  will-change:transform;
  animation-name:spin;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  transform-origin:50% 50%;
}
.gear.rev{animation-name:spin-rev}
@keyframes spin{from{transform:rotate(var(--r0,0deg))}to{transform:rotate(calc(var(--r0,0deg) + 360deg))}}
@keyframes spin-rev{from{transform:rotate(var(--r0,0deg))}to{transform:rotate(calc(var(--r0,0deg) - 360deg))}}

.twinkle{animation:twinkle var(--td,3s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.45}}

/* ambient starfield */
.starfield{position:absolute;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;background:var(--orange);border-radius:50%;
  animation:starTwinkle var(--td,3s) ease-in-out infinite;animation-delay:var(--dl,0s)}
/* mostly steady, with a brief blink-out near the middle of each cycle -> combined with per-star
   random duration/delay, stars twinkle intermittently and independently (not all in sync) */
@keyframes starTwinkle{0%,42%{opacity:1}50%{opacity:0}58%,100%{opacity:1}}

/* ---------- section header (menu/gallery shared style) ---------- */
.sec-head{
  position:relative;
  border-top:1.5px solid var(--yellow);
  border-bottom:1.5px solid var(--yellow);
  text-align:center;
  padding:20px 0;
}
.sec-head h2{
  font-family:"Gaegu",cursive;font-weight:700;color:var(--yellow);
  font-size:26px;letter-spacing:.14em;display:inline-block;
}
.sec-title{display:block;height:40px;width:auto;margin:0 auto}   /* real Sandoll Rome outline */
.sec-head .spark{
  position:absolute;top:50%;transform:translateY(-52%);
  height:52px;width:auto;
}

/* ---------- back / nav button ---------- */
.navbtn{
  position:absolute;top:14px;z-index:60;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,231,71,.12);color:var(--yellow);
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);-webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.navbtn:hover{background:rgba(255,106,61,.4)}
.nav-back{left:14px}

/* ---------- toast (shared: menu placeholder + copy-address feedback) ---------- */
.toast{
  position:fixed;left:50%;bottom:56px;transform:translateX(-50%) translateY(12px);
  background:rgba(20,20,20,.94);color:var(--yellow);
  font-family:"Gaegu",cursive;font-weight:700;font-size:16px;letter-spacing:.06em;
  padding:11px 22px;border-radius:999px;border:1px solid rgba(255,231,71,.4);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  z-index:200;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}