/* ============================================================
   Math Wizard - 상점 화면 (접두사 .sh-)
   ============================================================ */

/* 보라/남색 밤하늘 + 별 */
#screen-shop {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 28% 9%,  rgba(255,255,255,0.7) 0 1px,   transparent 2px),
    radial-gradient(circle at 45% 24%, rgba(255,255,255,0.8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 63% 12%, rgba(255,255,255,0.7) 0 1px,   transparent 2px),
    radial-gradient(circle at 81% 22%, rgba(255,255,255,0.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 93% 38%, rgba(255,255,255,0.6) 0 1px,   transparent 2px),
    radial-gradient(circle at 7% 54%,  rgba(255,255,255,0.5) 0 1px,   transparent 2px),
    radial-gradient(circle at 70% 48%, rgba(255,255,255,0.5) 0 1px,   transparent 2px),
    radial-gradient(circle at 35% 42%, rgba(255,255,255,0.45) 0 1px,  transparent 2px),
    radial-gradient(ellipse at 50% 125%, rgba(123, 92, 214, 0.55) 0%, transparent 62%),
    linear-gradient(180deg, #1d1440 0%, #2c1e63 48%, #4a3390 100%);
}

/* 위치는 공용 .hub-body(상단 바~탭 바 사이)가 잡는다 */
.sh-root { display: flex; flex-direction: column; }

/* 둥둥 떠다니는 장식 */
.sh-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.75;
  z-index: 0;
  animation: mw-bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
.sh-deco-1 { left: 30px;  top: 80px;  font-size: 44px; animation-delay: 0.2s; }
.sh-deco-2 { left: 84px;  top: 340px; font-size: 26px; animation-delay: 0.9s; }
.sh-deco-3 { right: 42px; top: 78px;  font-size: 42px; animation-delay: 1.4s; }
.sh-deco-4 { right: 86px; top: 360px; font-size: 26px; animation-delay: 0.5s; }
.sh-deco-5 { left: 48%;   top: 40px;  font-size: 20px; animation-delay: 1.9s; }

/* ----- 중앙: 상자 + 결과 ----- */
.sh-main {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 30px;
  padding: 4px 30px;
}

.sh-chest-zone, .sh-reveal-zone {
  width: 420px; height: 100%; max-height: 452px;
  border-radius: 26px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px;
}
.sh-chest-zone {
  background: rgba(18, 10, 44, 0.5);
  border: 3px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35), inset 0 0 44px rgba(123,92,214,0.18);
}
.sh-reveal-zone {
  background: rgba(255,255,255,0.05);
  border: 3px dashed rgba(255,255,255,0.28);
}

.sh-chest {
  font-size: 118px;
  line-height: 1.1;
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}
.sh-chest:hover { animation: sh-wiggle 0.7s ease-in-out infinite; }
.sh-chest.sh-shaking, .sh-chest.sh-shaking:hover { animation: sh-shake-hard 0.5s ease-in-out; }

@keyframes sh-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-6deg) translateY(-5px); }
  75%      { transform: rotate(6deg) translateY(-2px); }
}
@keyframes sh-shake-hard {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-11deg) scale(1.04); }
  30% { transform: rotate(10deg)  scale(1.06); }
  45% { transform: rotate(-9deg)  scale(1.09); }
  60% { transform: rotate(8deg)   scale(1.1); }
  75% { transform: rotate(-6deg)  scale(1.12); }
  90% { transform: rotate(3deg)   scale(1.08); }
}

.sh-price {
  font-size: 30px;
  color: #ffd76a;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.sh-odds { font-size: 14px; color: rgba(255,255,255,0.72); }
.sh-msg { min-height: 26px; font-size: 16px; color: #ffe9a8; text-align: center; }

/* ----- 뽑기 결과 ----- */
.sh-reveal-empty {
  font-size: 19px;
  color: rgba(255,255,255,0.62);
  text-align: center;
  line-height: 1.6;
}
.sh-rarity-label { font-size: 31px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }

.sh-reveal-card .item-card { width: 172px; padding: 14px 10px 12px; cursor: default; }
.sh-reveal-card .item-card:hover { transform: none; }
.sh-reveal-card .item-emoji { font-size: 58px; }
.sh-reveal-card .item-name { font-size: 18px; margin-top: 6px; }
.sh-reveal-card .item-rarity { font-size: 14px; }
.sh-reveal-card .item-stats { font-size: 15px; }

.sh-glow-common .item-card { box-shadow: 0 0 24px rgba(190,200,215,0.6); }
.sh-glow-rare   .item-card { box-shadow: 0 0 28px rgba(63,142,252,0.85); }
.sh-glow-epic   .item-card { box-shadow: 0 0 30px rgba(176,74,226,0.95), 0 0 70px rgba(176,74,226,0.5); }

.sh-reveal-note { font-size: 16px; color: #ffe9a8; text-align: center; }

/* ----- 물약 가게 ----- */
.sh-potions { position: relative; z-index: 1; padding: 0 26px 10px; }
.sh-potions-head {
  display: flex; align-items: baseline; gap: 12px;
  color: rgba(255,255,255,0.9);
  font-size: 17px;
  margin-bottom: 7px;
}
.sh-potion-list { display: flex; gap: 10px; }
.sh-potion-card {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  padding: 8px 12px;
}
.sh-potion-emoji { font-size: 34px; line-height: 1; }
.sh-potion-emoji img { width: 38px; height: 38px; }
.sh-potion-info { flex: 1; min-width: 0; color: #fff; }
.sh-potion-name { font-size: 17px; display: flex; align-items: baseline; gap: 8px; }
.sh-potion-own { font-size: 13px; color: #ffe08a; white-space: nowrap; }
.sh-potion-desc {
  font-size: 13px; color: rgba(255,255,255,0.65);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-potion-buy { white-space: nowrap; padding: 8px 14px; min-height: 40px; }

/* 황금 상자 버튼 */
.btn-gold {
  background: linear-gradient(180deg, #ffd76a, #f2a93b);
  border-color: #c9861d;
  color: #5b3c00;
}
.btn-gold:hover { filter: brightness(1.06); }

/* ----- 하단: 뽑기 기록 ----- */
.sh-bottom { position: relative; z-index: 1; padding: 0 26px 14px; }
.sh-history-head {
  display: flex; align-items: baseline; justify-content: space-between;
  color: rgba(255,255,255,0.9);
  font-size: 17px;
  margin-bottom: 7px;
}
.sh-hint { font-size: 14px; color: rgba(255,255,255,0.58); }

.sh-history {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto;
  min-height: 48px;
  padding-bottom: 4px;
}
.sh-history::-webkit-scrollbar { height: 8px; }
.sh-history::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }

.sh-hist-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.93);
  border: 2px solid var(--r-common);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 15px;
  color: var(--c-text);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.sh-hist-empty { font-size: 15px; color: rgba(255,255,255,0.5); }

/* ============================================================
   세로 모드 (720x1280) — body.mw-portrait
   ============================================================ */
body.mw-portrait .sh-main {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 6px 22px;
  overflow-y: auto;
}
body.mw-portrait .sh-chest-zone,
body.mw-portrait .sh-reveal-zone {
  width: 100%;
  max-width: 640px;
  height: auto;
  max-height: none;
  flex: 0 0 auto;
  padding: 14px;
}
body.mw-portrait .sh-reveal-zone { min-height: 250px; }
body.mw-portrait .sh-chest { font-size: 92px; }
body.mw-portrait .sh-potions { padding: 0 22px 8px; }
body.mw-portrait .sh-potion-list { flex-direction: column; }
body.mw-portrait .sh-deco-2, body.mw-portrait .sh-deco-4 { display: none; }
body.mw-portrait .sh-deco-1 { left: 16px; top: 40px; font-size: 34px; }
body.mw-portrait .sh-deco-3 { right: 18px; top: 38px; font-size: 32px; }