/* 메달교환기 가위바위보 — 문방구 앞에 놓인 게임기 */

:root {
  --sky: #2aa4dd;           /* 캐비닛의 하늘색 */
  --sky-dark: #1b7fae;
  --yellow: #ffd400;
  --yellow-deep: #f0a800;
  --red: #e8342c;
  --red-deep: #b81f19;
  --green: #19b98a;
  --ink: #241c14;
  --steel: #9aa3ab;
  --steel-dark: #5d666f;
  --steel-deep: #3a4149;
  --paper: #fdf8ec;
  --lcd-bg: #1a0c08;
  --lcd-on: #ff5533;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Jua", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  background: linear-gradient(180deg, #4fbde8 0%, #37a6d6 46%, #2b8fbb 72%, #a9afb3 72.1%, #878e93 100%);
  min-height: 100%;
}

/* ── 문방구 앞 풍경 ──────────────────────────────────────────────── */
.shopfront {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 페인트칠한 하늘색 벽 — 아래로 갈수록 때가 탔다 */
.wall {
  position: absolute;
  inset: 0 0 26% 0;
  background:
    linear-gradient(180deg, #4fbde8 0%, #37a6d6 55%, #2b8fbb 100%);
}

.wall::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 페인트 얼룩과 물때 */
  background:
    radial-gradient(70% 40% at 15% 10%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(50% 30% at 85% 25%, rgba(255, 255, 255, .10), transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .03) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, transparent 62%, rgba(60, 50, 40, .18) 100%);
}

/* 시멘트 바닥 */
.floor {
  position: absolute;
  inset: 74% 0 0 0;
  background:
    linear-gradient(180deg, #a9afb3 0%, #9aa1a6 40%, #878e93 100%);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .22);
}

.floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .10) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .08) 0 1px, transparent 1px 64px),
    radial-gradient(60% 50% at 30% 30%, rgba(255, 255, 255, .12), transparent 70%);
}

.stage {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0 auto;
  padding: 18px 14px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ── 간판 ───────────────────────────────────────────────────────── */
.signboard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  background: linear-gradient(180deg, #fff05a, var(--yellow) 55%, var(--yellow-deep));
  border: 3px solid var(--ink);
  border-radius: 8px;
  transform: rotate(-1.2deg);
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .28);
}

.signboard h1 {
  margin: 0;
  font-family: "Black Han Sans", "Jua", sans-serif;
  font-size: clamp(17px, 4.6vw, 25px);
  letter-spacing: -.01em;
  color: var(--red);
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .22);
}

.sign-star { color: var(--red); font-size: 15px; }

/* ── 게임기 몸통 ────────────────────────────────────────────────── */
.machine {
  width: 100%;
  position: relative;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .35));
}

.machine-top {
  background: linear-gradient(180deg, #cfd5da, var(--steel) 60%, var(--steel-dark));
  border: 4px solid var(--steel-deep);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 10px 10px 6px;
}

.cabinet {
  position: relative;
  width: 100%;
  aspect-ratio: 674 / 648;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid #2f353b;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .35);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cabinet-svg,
.cabinet-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}


.cabinet-fx { pointer-events: none; }

/* 캐비닛 그림 위의 조작부 — 그림에 이미 있는 자리에 딱 맞춰 놓는다 */
.hot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hot:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* 버튼 세 개는 아래 조작판 위에 있다 — 그림의 자리 그대로 (674x648 기준) */
.hand-btn {
  width: 10.7%;
  aspect-ratio: 1;
  top: 85.8%;
  transition: transform .06s ease;
}

.hand-btn[data-hand="scissors"] { left: 26.8%; }
.hand-btn[data-hand="rock"]     { left: 44.6%; }
.hand-btn[data-hand="paper"]    { left: 62.4%; }

.hand-btn::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 90, .65) 0%, rgba(255, 212, 0, 0) 70%);
  opacity: 0;
  transition: opacity .18s ease;
}

.cabinet.armed .hand-btn::after { opacity: .95; animation: pulse 1.05s ease-in-out infinite; }
.hand-btn:active { transform: translateY(2px) scale(.96); }
.hand-btn.pressed { transform: translateY(3px) scale(.94); }

@keyframes pulse { 50% { opacity: .3; } }

.coin-slot {
  left: 71.5%;
  top: 25.5%;
  width: 21.5%;
  height: 38.5%;
  border-radius: 10px;
}

.coin-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .9), 0 0 26px rgba(255, 212, 0, .55);
  opacity: 0;
  transition: opacity .2s ease;
}

.cabinet.needs-coin .coin-slot::after { opacity: 1; animation: pulse 1.3s ease-in-out infinite; }
.coin-slot:hover::after { opacity: .6; }

/* 판정 딱지에 불이 들어온다 — 캐비닛 SVG 안의 요소를 CSS 로 밝힌다 */
.zone { transition: filter .18s ease; }

.cabinet.result .cabinet-svg { filter: brightness(.72) saturate(.9); }
.cabinet.result.spinning .cabinet-svg { filter: brightness(.92) saturate(1); }

.zone.lit {
  filter: brightness(1.75) saturate(1.35)
          drop-shadow(0 0 9px rgba(255, 226, 130, .95));
  animation: zoneBlink .62s ease-in-out infinite alternate;
}

@keyframes zoneBlink {
  from { filter: brightness(1.35) saturate(1.2) drop-shadow(0 0 5px rgba(255, 226, 130, .6)); }
  to   { filter: brightness(1.95) saturate(1.45) drop-shadow(0 0 14px rgba(255, 240, 170, 1)); }
}

/* 결과 문구 — 기계 위에 뜨는 말풍선 */
.callout {
  position: absolute;
  left: 50%;
  top: 11.5%;
  transform: translate(-50%, -8px) rotate(-1.5deg);
  padding: 7px 20px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, #ffeeb0);
  border: 3px solid var(--ink);
  font-family: "Black Han Sans", "Jua", sans-serif;
  font-size: clamp(17px, 4.6vw, 27px);
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--ink);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.callout.show { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); }
.callout.win  { color: var(--red); background: linear-gradient(180deg, #fffbe0, #ffd94a); }
.callout.lose { color: #4a5560; background: linear-gradient(180deg, #fff, #dfe5ea); }
.callout.draw { color: #10708f; background: linear-gradient(180deg, #fff, #cdeeff); }
.callout.count { font-size: clamp(22px, 7vw, 40px); color: var(--red); }

/* ── 기계 앞판 ──────────────────────────────────────────────────── */
.machine-front {
  background: linear-gradient(180deg, var(--steel-dark), var(--steel-deep) 70%, #2b3138);
  border: 4px solid var(--steel-deep);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.readouts {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 8px;
}

.readout { display: flex; flex-direction: column; gap: 5px; }

.readout-label {
  font-size: 11px;
  color: #d7dee5;
  text-align: center;
  letter-spacing: .12em;
}

/* 빨간 7세그먼트 표시창 */
.lcd {
  position: relative;
  background: var(--lcd-bg);
  border: 2px solid #0c0605;
  border-radius: 5px;
  padding: 7px 8px;
  text-align: center;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .18);
  overflow: hidden;
}

.lcd strong {
  display: block;
  font-family: "Black Han Sans", ui-monospace, monospace;
  font-size: clamp(22px, 6vw, 31px);
  line-height: 1.1;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* 표시창 유리의 가로 주사선과 광택 */
.lcd::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, rgba(255, 255, 255, .10) 0 34%, transparent 34%);
}

.lcd-ghost { display: none; }

.lcd strong {
  position: relative;
  color: var(--lcd-on);
  text-shadow: 0 0 7px rgba(255, 85, 51, .85), 0 0 18px rgba(255, 40, 20, .55);
}

.lcd.small strong { font-size: clamp(12px, 3.3vw, 16px); letter-spacing: .02em; }

.lcd strong.bump { animation: bump .45s cubic-bezier(.2, 1.6, .4, 1); }

@keyframes bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.24); color: #fff2ee; text-shadow: 0 0 14px #ff7755; }
  100% { transform: scale(1); }
}

.status {
  margin: 0;
  min-height: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #e6ebf0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}

.status.warn { color: var(--yellow); }
.status.bad { color: #ff9d96; }

/* 메달 나오는 곳 */
.tray {
  position: relative;
  height: 42px;
  border-radius: 6px;
  background: linear-gradient(180deg, #14181c 0%, #23292f 42%, #171c21 100%);
  border: 2px solid #1b2026;
  box-shadow: inset 0 5px 12px rgba(0, 0, 0, .9);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

.tray-label {
  font-size: 10px;
  letter-spacing: .18em;
  color: #7d8890;
  position: relative;
  z-index: 1;
}

/* 이겼을 때 배출구로 떨어져 쌓이는 메달 */
.tray { overflow: hidden; }

.tray-medal {
  position: absolute;
  top: -18px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff6c4 0%, #f7c93c 45%, #b8830c 100%);
  border: 1px solid rgba(120, 80, 0, .7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  animation: dropMedal 3.6s cubic-bezier(.3, .7, .5, 1) forwards;
}

@keyframes dropMedal {
  0%   { transform: translateY(0) scale(.7) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  38%  { transform: translateY(26px) scale(1) rotate(220deg); }
  48%  { transform: translateY(19px) scale(1) rotate(250deg); }
  58%  { transform: translateY(26px) scale(1) rotate(270deg); }
  66%  { transform: translateY(23px) scale(1) rotate(276deg); }
  74%, 88% { transform: translateY(26px) scale(1) rotate(280deg); opacity: 1; }
  100% { transform: translateY(26px) scale(1) rotate(280deg); opacity: 0; }
}

.machine-legs {
  display: flex;
  justify-content: space-between;
  padding: 0 12%;
}

.machine-legs i {
  width: 26px;
  height: 12px;
  background: linear-gradient(180deg, var(--steel-deep), #22272d);
  border-radius: 0 0 5px 5px;
}

/* 기계에 비뚤게 붙여 놓은 가격표 */
.pricetag {
  position: absolute;
  z-index: 2;
  top: -14px;
  right: 2px;
  padding: 8px 12px 9px;
  background: linear-gradient(180deg, #fffdf2, #fff2c9);
  border: 2px solid var(--ink);
  border-radius: 3px;
  transform: rotate(7deg);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .3);
}

.pricetag b {
  font-family: "Black Han Sans", "Jua", sans-serif;
  font-size: 17px;
  color: var(--red);
}

/* 종이를 붙인 테이프 자국 */
.pricetag::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 34px;
  height: 15px;
  transform: translateX(-50%) rotate(-6deg);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .12);
}

/* ── 스티커 버튼 ────────────────────────────────────────────────── */
.actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.sticker {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 17px;
  color: var(--ink);
  background: linear-gradient(180deg, #fff, var(--paper));
  border: 3px solid var(--ink);
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
  transition: transform .07s ease, box-shadow .07s ease;
}

.sticker:nth-child(1) { transform: rotate(-1.5deg); }
.sticker:nth-child(2) { transform: rotate(.8deg); }
.sticker:nth-child(3) { transform: rotate(-.6deg); }

.sticker.gold {
  background: linear-gradient(180deg, #fff36b, var(--yellow) 60%, var(--yellow-deep));
}

.sticker:hover { transform: translate(-1px, -1px) rotate(0deg); box-shadow: 5px 5px 0 rgba(0, 0, 0, .3); }
.sticker:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
.sticker:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.notice {
  margin: 4px 0 0;
  max-width: 420px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.75;
  color: #4a4038;
  background: linear-gradient(180deg, #fffdf4, var(--paper));
  border: 2px dashed #b9ac97;
  border-radius: 6px;
  padding: 9px 14px;
  transform: rotate(.5deg);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .18);
}

.notice b { color: var(--red-deep); }

/* ── 모달 ─────────────────────────────────────────────────────────
   기계 앞에 붙은 안내 종이처럼 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(18, 26, 32, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.modal[hidden] { display: none; }

.modal-box {
  width: min(470px, 100%);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, .4);
  animation: rise .2s ease;
}

@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: linear-gradient(180deg, #fff36b, var(--yellow));
  border-bottom: 3px solid var(--ink);
}

.modal-head h2 {
  margin: 0;
  font-family: "Black Han Sans", "Jua", sans-serif;
  font-size: 18px;
  color: var(--ink);
}

.x {
  border: 2px solid var(--ink);
  background: #fff;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 5px;
  font-family: inherit;
}

.x:hover { background: var(--red); color: #fff; }

.modal-body { padding: 16px; }
.modal-foot { padding: 0 16px 16px; }

.lead { margin: 0 0 13px; font-size: 14px; color: #5c5147; }

.amounts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.amount {
  border: 3px solid var(--ink);
  background: #fff;
  border-radius: 8px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .22);
  transition: transform .07s ease;
}

.amount:hover { transform: translate(-1px, -1px); }

.amount[aria-pressed="true"] {
  background: linear-gradient(180deg, #fff36b, var(--yellow));
  box-shadow: 2px 2px 0 var(--red-deep);
}

.amount .won {
  display: block;
  font-family: "Black Han Sans", "Jua", sans-serif;
  font-size: 17px;
  color: var(--ink);
}

.amount .medal { display: block; font-size: 12px; color: #6d6156; margin-top: 1px; }

/* 토스 위젯이 들어가는 자리 — 흰 종이 위에 얹는다 */
.pay-widget {
  background: #fff;
  border: 2px solid #ded5c6;
  border-radius: 8px;
  padding: 6px 4px;
  min-height: 90px;
}

.pay-note { margin: 11px 0 0; font-size: 12.5px; color: #6d6156; line-height: 1.6; }
.pay-note.bad { color: var(--red-deep); font-weight: 700; }

.btn {
  font-family: inherit;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
  transition: transform .07s ease, box-shadow .07s ease;
}

.btn.primary { background: linear-gradient(180deg, #ffe66b, var(--yellow) 60%, var(--yellow-deep)); }
.btn.wide { width: 100%; }
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(0, 0, 0, .3); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
.btn:disabled { opacity: .5; cursor: default; }

.help-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.9;
  color: #4a4038;
}

.help-list b { color: var(--red-deep); }
.help-note { margin: 13px 0 0; font-size: 13px; color: #6d6156; }

kbd {
  background: #fff;
  border: 2px solid var(--ink);
  border-bottom-width: 3px;
  border-radius: 5px;
  padding: 0 6px;
  font-size: 12px;
  font-family: inherit;
}

@media (max-width: 400px) {
  .stage { padding: 12px 9px 30px; }
  .readouts { grid-template-columns: 1fr 1fr; }
  .readout:nth-child(3) { grid-column: 1 / -1; }
  .sticker { font-size: 14px; padding: 9px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}