/* ════════════════════════════════════════════
   Shop Street / Shop Home (v3.3)
   ════════════════════════════════════════════ */
.shop-street { padding: 6px 0; }
.shop-cat-title {
  font-size: 0.85em;
  color: var(--c-gold);
  margin-bottom: 8px;
  letter-spacing: 1px;
  font-weight: bold;
}
.shop-btn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.shop-btn {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 8px;
  color: var(--c-text);
  font-size: 0.82em;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--t-fast);
}
.shop-btn:active {
  background: var(--c-surface3);
  border-color: var(--c-gold-dim);
}
.shop-btn--todo {
  opacity: 0.55;
  color: var(--c-text-dim);
  border-style: dashed;
}
.shop-btn--todo::after {
  content: ' ◔';
  color: var(--c-text-faint);
  font-size: 0.7em;
}

.shop-home { padding: 4px 0; }

.shop-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.shop-tab {
  flex: 1;
  min-width: 60px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 6px 4px;
  color: var(--c-text-dim);
  font-size: 0.72em;
  font-family: var(--font);
  cursor: pointer;
}
.shop-tab.active {
  background: rgba(200,160,60,0.12);
  border-color: var(--c-gold-dim);
  color: var(--c-gold);
}
.shop-price {
  font-size: 0.75em;
  color: var(--c-text-dim);
  margin-bottom: 8px;
  text-align: right;
}

.shop-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.shop-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.shop-item:active { background: var(--c-surface2); }
.shop-item.selected {
  border-color: var(--c-gold);
  background: rgba(200,160,60,0.08);
  box-shadow: 0 0 0 1px var(--c-gold-dim);
}
.shop-item-name {
  font-size: 0.85em;
  color: var(--c-gold);
  margin-bottom: 4px;
  font-weight: bold;
}
.shop-item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.72em;
  color: var(--c-text-dim);
  margin-bottom: 3px;
}
.shop-item-stats b { color: var(--c-text); font-weight: normal; }
.shop-item-req,
.shop-item-price {
  font-size: 0.7em;
  color: var(--c-text-faint);
  margin-top: 3px;
}
.shop-item-price b { color: var(--c-text); font-weight: bold; }

.cmp-up   { color: #80d880; font-weight: bold; }
.cmp-down { color: #d86060; font-weight: bold; }

.shop-empty {
  text-align: center;
  padding: 20px;
  color: var(--c-text-faint);
  font-size: 0.82em;
}

.shop-eq-ref {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.shop-eq-hd {
  font-size: 0.72em;
  color: var(--c-text-dim);
  margin-bottom: 4px;
}
.shop-eq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px 8px;
  font-size: 0.72em;
}
.shop-eq-grid > div { display: flex; justify-content: space-between; }
.shop-eq-grid span { color: var(--c-text-faint); }
.shop-eq-grid b { color: var(--c-text); font-weight: normal; }

.shop-wallet {
  font-size: 0.72em;
  color: var(--c-text-dim);
  text-align: center;
  margin-bottom: 8px;
}
.shop-wallet b { color: var(--c-gold); font-weight: bold; }

.shop-buy-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.shop-buy-row label {
  flex: 1;
  font-size: 0.75em;
  color: var(--c-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-buy-row input {
  width: 70px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font);
  padding: 4px 6px;
  font-size: 0.85em;
}
.shop-buy-btn {
  background: linear-gradient(135deg, #7a5010, #c9a84c);
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  font-family: var(--font);
  padding: 8px 14px;
  cursor: pointer;
}
.shop-buy-btn:active { opacity: 0.85; }

.shop-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.shop-pg-btn {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text-dim);
  font-size: 0.75em;
  font-family: var(--font);
  padding: 6px 10px;
  cursor: pointer;
}
.shop-pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.shop-pg-info {
  font-size: 0.75em;
  color: var(--c-gold-dim);
}

/* ════════════════════════════════════════════
   Bank / Black Shop
   ════════════════════════════════════════════ */
.bank-view { padding: 4px 0; }

.bank-balance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.bank-balance > div {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bank-balance span {
  font-size: 0.7em;
  color: var(--c-text-faint);
}
.bank-balance b {
  font-size: 1.05em;
  color: var(--c-gold);
}

.bank-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.bank-card-hd {
  font-size: 0.8em;
  color: var(--c-gold);
  margin-bottom: 8px;
  font-weight: bold;
}
.bank-card-sub {
  font-size: 0.7em;
  color: var(--c-text-faint);
  margin-top: 6px;
  font-weight: normal;
}

/* v3.74c: 變臉中心頭像 grid */
.bs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--c-surface3);
  border-radius: var(--r-sm);
}
.bs-img-cell {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 6px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all var(--t-fast);
}
.bs-img-cell:hover,
.bs-img-cell:active {
  background: var(--c-surface2);
  border-color: var(--c-gold-dim);
  box-shadow: 0 0 6px rgba(208,168,80,0.4);
}
.bs-img-cell img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--c-surface3);
}
.bs-img-id {
  font-size: 0.7em;
  color: var(--c-text-dim);
}
.bank-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 6px;
}
.bank-row:has(> input:only-child),
.bank-row > input[type="text"]:only-child { grid-template-columns: 1fr; }

.bank-row input {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font);
  padding: 7px 9px;
  font-size: 0.82em;
}
.bank-action-btn {
  background: linear-gradient(135deg, #7a5010, #c9a84c);
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  font-family: var(--font);
  padding: 7px 14px;
  cursor: pointer;
}
.bank-action-btn:active { opacity: 0.85; }

/* ════════════════════════════════════════════
   Draw Box Animation (寶箱開啟過場, v3.9)
   ════════════════════════════════════════════ */
.draw-anim {
  text-align: center;
  padding: 24px 16px 18px;
  position: relative;
}

.draw-box-icon {
  font-size: 4.5em;
  display: inline-block;
  animation: drawShake 0.12s linear infinite;
  filter: drop-shadow(0 0 8px rgba(200,160,60,0.3));
}

.draw-box-icon--open {
  animation: drawPop 0.6s cubic-bezier(.2,1.4,.5,1) forwards;
  filter: drop-shadow(0 0 18px rgba(255,220,120,0.8))
          drop-shadow(0 0 36px rgba(255,180,80,0.5));
}

@keyframes drawShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-3px, 1px) rotate(-2deg); }
  50%  { transform: translate(3px, -1px) rotate(2deg); }
  75%  { transform: translate(-2px, 2px) rotate(-1deg); }
  100% { transform: translate(2px, -2px) rotate(1deg); }
}

@keyframes drawPop {
  0%   { transform: scale(0.4) rotate(-20deg); opacity: 0.3; }
  60%  { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.draw-chant {
  margin-top: 18px;
  font-size: 1.6em;
  font-weight: bold;
  color: var(--c-gold);
  letter-spacing: 6px;
  animation: drawChantPulse 0.6s ease-in-out infinite alternate;
}

@keyframes drawChantPulse {
  from { opacity: 0.55; text-shadow: 0 0 4px rgba(200,160,60,0.3); }
  to   { opacity: 1;    text-shadow: 0 0 12px rgba(255,220,120,0.7); }
}

.draw-sub {
  margin-top: 8px;
  font-size: 0.78em;
  color: var(--c-text-faint);
  letter-spacing: 2px;
}

/* 階段 2：開箱結果 */
.draw-anim--open .draw-burst {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
}

.draw-anim--open .draw-box-icon {
  position: relative;
  z-index: 2;
}

.draw-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,220,120,0.9), rgba(255,220,120,0));
  transform-origin: 0 50%;
  animation: drawRay 0.9s ease-out forwards;
  z-index: 1;
}
.draw-ray--1 { transform: rotate(0deg)   translateX(20px); animation-delay: 0.05s; }
.draw-ray--2 { transform: rotate(90deg)  translateX(20px); animation-delay: 0.1s; }
.draw-ray--3 { transform: rotate(180deg) translateX(20px); animation-delay: 0.15s; }
.draw-ray--4 { transform: rotate(270deg) translateX(20px); animation-delay: 0.2s; }
.draw-ray::before, .draw-ray::after {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 80px; height: 2px;
  background: inherit;
}
.draw-ray::before { transform: rotate(45deg) translateX(0); }
.draw-ray::after  { transform: rotate(-45deg) translateX(0); }

@keyframes drawRay {
  0%   { opacity: 0; transform: scaleX(0); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.4); }
}

.draw-result-head {
  margin-top: 16px;
  font-size: 0.95em;
  color: var(--c-gold);
  font-weight: bold;
  letter-spacing: 2px;
}

.draw-prize-name {
  margin-top: 8px;
  font-size: 1.45em;
  font-weight: bold;
  color: #ffea8a;
  text-shadow: 0 0 8px rgba(255,220,120,0.6),
               0 0 24px rgba(255,180,80,0.4);
  letter-spacing: 1px;
  animation: drawPrizeIn 0.7s 0.2s ease-out backwards;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(60,40,10,0.4), rgba(40,25,5,0.4));
  border: 1px solid rgba(200,160,60,0.4);
  border-radius: var(--r-md);
  display: inline-block;
  margin-top: 12px;
}

@keyframes drawPrizeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.draw-close-btn {
  margin-top: 20px;
  background: linear-gradient(135deg, #7a5010, #c9a84c);
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  font-size: 0.9em;
  font-weight: bold;
  font-family: var(--font);
  padding: 10px 32px;
  cursor: pointer;
  letter-spacing: 4px;
  animation: drawPrizeIn 0.7s 0.5s ease-out backwards;
}
.draw-close-btn:active { opacity: 0.85; }