/* =====================================================
 *  摸鱼游戏厅 · 样式 v2(深色霓虹 · 玻璃拟态 · 手机优先)
 * ===================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #080814;
}

body {
  position: fixed;
  inset: 0;
  color: #fff;
}

.hidden { display: none !important; }

/* ===== 大厅(街机贴纸风:粗描边 + 硬投影 + 微倾斜) ===== */
#hub-screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background-color: #1a1226;
  background-image:
    radial-gradient(rgba(255,255,255,.055) 1.3px, transparent 1.3px),
    radial-gradient(rgba(255,143,171,.05) 1.6px, transparent 1.6px),
    radial-gradient(700px 340px at 50% -6%, rgba(255,180,80,.14) 0%, transparent 60%);
  background-size: 24px 24px, 38px 38px, 100% 100%;
}

.hub-wrap {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* 漂浮贴纸纸屑 */
.hub-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hub-deco i {
  position: absolute; display: block;
  border: 2px solid rgba(255,255,255,.22);
  animation: floatUp linear infinite;
}
.hub-deco i:nth-child(1) { left: 10%; width: 12px; height: 12px; border-radius: 3px; background: #ffd86b; animation-duration: 12s; transform: rotate(14deg); }
.hub-deco i:nth-child(2) { left: 30%; width: 9px;  height: 9px;  border-radius: 50%; background: #8be9fd; animation-duration: 15s; animation-delay: 3s; }
.hub-deco i:nth-child(3) { left: 36%; width: 15px; height: 15px; border-radius: 4px; background: #ff8fab; animation-duration: 18s; animation-delay: 6s; }
.hub-deco i:nth-child(4) { left: 64%; width: 10px; height: 10px; border-radius: 2px;  background: #7ce38b; animation-duration: 13s; animation-delay: 2s; }
.hub-deco i:nth-child(5) { left: 86%; width: 14px; height: 14px; border-radius: 50%; background: #d9a5ff; animation-duration: 20s; animation-delay: 8s; }
.hub-deco i:nth-child(6) { left: 52%; width: 8px;  height: 8px;  border-radius: 3px; background: #ffb14c; animation-duration: 22s; animation-delay: 11s; }
@keyframes floatUp {
  from { transform: translateY(108vh) rotate(0deg); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  to   { transform: translateY(-14vh) rotate(320deg); opacity: 0; }
}

.hub-wrap { z-index: 2; }

/* 头部:贴纸吉祥物 + 霓虹招牌 */
.hub-header { display: flex; align-items: center; gap: 14px; }

.hub-mascot {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: 18px;
  background: #ffd86b;
  border: 3px solid #241a35;
  box-shadow: 4px 4px 0 rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  transform: rotate(-5deg);
  animation: mascotBob 3.2s ease-in-out infinite;
}
@keyframes mascotBob {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-5px); }
}

.hub-titles { flex: 1; min-width: 0; position: relative; }
.hub-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  text-shadow:
    2px 2px 0 #e8447a,
    4px 4px 0 rgba(0,0,0,.45);
  transform: rotate(-1deg);
  display: inline-block;
}
.hub-open-tag {
  position: absolute;
  top: -10px; right: 2px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #241a35;
  background: #8be9fd;
  border: 2px solid #241a35;
  border-radius: 8px;
  padding: 2px 7px;
  transform: rotate(4deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.hub-subtitle {
  margin-top: 6px;
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #241a35;
  background: #8be9fd;
  border: 2px solid #241a35;
  border-radius: 9px;
  padding: 3px 10px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.coin-pill {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  background: #ffd86b;
  border: 3px solid #241a35;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 15px;
  font-weight: 900;
  color: #241a35;
  box-shadow: 3px 3px 0 rgba(0,0,0,.55);
}
.coin-icon { font-size: 13px; }


.hub-open-tag {
  display: inline-block;
  position: absolute;
  top: -9px; right: -4px;
  font-size: 9px; font-weight: 900; letter-spacing: 1px;
  color: #241a35; background: #8be9fd;
  border: 2px solid #241a35; border-radius: 7px;
  padding: 2px 7px;
  transform: rotate(4deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

/* 称号进度卡(贴纸面板 + 条纹进度) */
.rank-card {
  margin-top: 20px;
  background: #241a35;
  border: 3px solid #0e0a18;
  border-radius: 18px;
  padding: 13px 15px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.5);
  transform: rotate(.4deg);
}
.rank-line { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rank-name { font-weight: 900; color: #ffd86b; letter-spacing: 1px; }
.rank-hint { margin-left: auto; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55); }
.rank-progress {
  margin-top: 10px;
  height: 14px;
  background: #120d1f;
  border: 2px solid #0e0a18;
  border-radius: 99px;
  overflow: hidden;
}
.rank-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: repeating-linear-gradient(45deg, #ffd86b 0 8px, #ffb14c 8px 16px);
  background-size: 28px 28px;
  animation: stripes 1.2s linear infinite;
  box-shadow: 0 0 8px rgba(255, 177, 76, .6);
  transition: width .5s ease;
}
@keyframes stripes { to { background-position: 28px 0; } }

/* 区块标题 */
.section-title {
  margin: 24px 2px 13px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 900; letter-spacing: 2px;
  color: #ffb14c;
  text-shadow: 1.5px 1.5px 0 rgba(0,0,0,.6);
}

/* 游戏卡片:街机贴纸 */
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}

.game-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 3px solid #241a35;
  padding: 14px 13px 12px;
  min-height: 174px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  box-shadow: 5px 6px 0 rgba(0,0,0,.5);
  transition: transform .12s ease, box-shadow .12s ease;
  animation: cardIn .45s cubic-bezier(.2,.9,.3,1.25) backwards;
}
.game-card:nth-child(1) { transform: rotate(-1.3deg); animation-delay: .03s; }
.game-card:nth-child(2) { transform: rotate(1.1deg);  animation-delay: .1s; }
.game-card:nth-child(3) { transform: rotate(1.4deg);  animation-delay: .17s; }
.game-card:nth-child(4) { transform: rotate(-1.2deg); animation-delay: .24s; }
.game-card:nth-child(1):active { transform: rotate(-1.3deg) translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.game-card:nth-child(2):active { transform: rotate(1.1deg) translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.game-card:nth-child(3):active { transform: rotate(1.4deg) translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.game-card:nth-child(4):active { transform: rotate(-1.2deg) translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(.9) rotate(0deg); }
  to   { opacity: 1; }
}

.g-icon-wrap {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  border: 3px solid #241a35;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  margin-bottom: 6px;
}
.g-icon {
  font-size: 28px; line-height: 1; display: block;
  animation: floaty 3.4s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-4px) rotate(4deg); }
}

.g-name {
  font-size: 16.5px; font-weight: 900; letter-spacing: .5px; color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(0,0,0,.55);
}
.g-desc {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-best {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 900;
  color: #241a35;
  background: #ffd86b;
  border: 2px solid #241a35;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.g-best-ico { font-size: 9.5px; }

.g-go {
  position: absolute;
  right: 11px; bottom: 12px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #241a35;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #241a35;
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.game-card:active .g-go { transform: translateX(4px) scale(1.1); background: #7ce38b; }

.game-card.soon { filter: saturate(.25) brightness(.65); }
.g-soon {
  position: absolute; top: 11px; right: 10px;
  font-size: 10px; font-weight: 900;
  background: #fff; color: #241a35;
  border: 2px solid #241a35;
  border-radius: 999px;
  padding: 2px 8px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
}

/* 天赋所横幅 */
.talent-btn {
  margin-top: 22px;
  width: 100%;
  background: #7ce38b;
  color: #143318;
  border: 3px solid #241a35;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .5px;
  padding: 15px 0;
  box-shadow: 5px 5px 0 rgba(0,0,0,.5);
  transform: rotate(.3deg);
}
.talent-btn:active { transform: rotate(.3deg) translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }

.hub-footer {
  margin-top: auto;
  padding-top: 28px;
  text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  color: rgba(255,255,255,.3);
}

/* ===== 画布 ===== */
#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: #191932;
  touch-action: none;
}
#game-canvas.active { display: block; }

/* ===== HUD ===== */
#game-hud {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 30;
}
.hud-btn {
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(0, 0, 0, .35);
  font-size: 17px;
  color: #fff;
  backdrop-filter: blur(4px);
}

/* ===== 弹层 ===== */
#overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(8, 8, 20, .74);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.overlay-card {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, #262650, #1c1c3a);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  padding: 22px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: popIn .22s ease;
  max-height: 82vh;
  overflow-y: auto;
  touch-action: pan-y;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

.overlay-title { text-align: center; font-size: 21px; font-weight: 800; margin-bottom: 4px; }
.overlay-sub { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.55); margin-bottom: 14px; line-height: 1.7; }

.upgrade-choice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 13px 14px;
  margin-top: 10px;
  color: #fff;
  transition: transform .1s ease;
}
.upgrade-choice:active { transform: scale(.96); background: rgba(255,255,255,.13); }
.upgrade-choice .u-icon { font-size: 28px; }
.upgrade-choice .u-name { font-size: 15px; font-weight: 700; }
.upgrade-choice .u-desc { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 2px; line-height: 1.5; }
.upgrade-choice .u-lv {
  margin-left: auto;
  font-size: 10px;
  color: #ffd86b;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  padding: 3px 7px;
  flex-shrink: 0;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(255,255,255,.1);
}
.stat-row .v { font-weight: 800; color: #ffd86b; }

.overlay-btns { display: flex; gap: 10px; margin-top: 18px; }
.btn {
  flex: 1;
  border: none;
  border-radius: 14px;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
}
.btn:active { transform: scale(.96); }
.btn.primary {
  background: linear-gradient(135deg, #ffcf5c, #ff8f5c);
  color: #3a2400;
  border: none;
  box-shadow: 0 6px 18px rgba(255, 160, 80, .35);
}

.overlay-coins { text-align: center; margin-top: 14px; font-size: 15px; font-weight: 800; color: #ffd86b; }

.new-record {
  display: block;
  margin: 2px auto 8px;
  font-size: 11px;
  color: #ff5c8a;
  font-weight: 800;
  text-align: center;
  animation: blink 1s ease infinite;
}
@keyframes blink { 50% { opacity: .4; } }

/* ===== 天赋所 / 升级行 ===== */
.talent-btn {
  margin-top: 18px;
  width: 100%;
  border: 1px dashed rgba(255, 216, 107, .45);
  border-radius: 18px;
  background: rgba(255, 216, 107, .07);
  color: #ffd86b;
  font-size: 13.5px;
  font-weight: 700;
  padding: 15px 0;
}
.talent-btn:active { transform: scale(.97); background: rgba(255, 216, 107, .14); }

.talent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 11px 12px;
  margin-top: 10px;
}
.talent-row .t-icon { font-size: 24px; flex-shrink: 0; }
.talent-row .t-info { flex: 1; min-width: 0; }
.talent-row .t-name { font-size: 14px; font-weight: 700; }
.talent-row .t-desc { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px; }
.talent-pips { font-size: 10px; color: #ffd86b; letter-spacing: 2px; margin-left: 4px; }
.talent-buy {
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffcf5c, #ff8f5c);
  color: #3a2400;
  flex-shrink: 0;
}
.talent-buy:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.35); }
.talent-max { font-size: 11px; color: #7ce38b; font-weight: 800; flex-shrink: 0; }

/* ===== 升级卡稀有度 ===== */
.upgrade-choice.rare { border-color: rgba(91,177,255,.75); background: rgba(45,110,200,.18); }
.upgrade-choice.rare .u-lv { color: #5bb1ff; }
.upgrade-choice.epic {
  border-color: rgba(200,120,255,.9);
  background: rgba(130,60,200,.22);
  box-shadow: 0 0 16px rgba(200,120,255,.3);
}
.upgrade-choice.epic .u-lv { color: #d78aff; }
.upgrade-choice .u-lv.lv-common { color: rgba(255,255,255,.55); }
/* ===== 幸存者升级卡:光环/描边/叠加特效 ===== */
.upgrade-choice { overflow: hidden; }
.upgrade-choice { --rc: rgba(255,255,255,.4); }
.upgrade-choice.rare { --rc: rgba(91,177,255,.95); }
.upgrade-choice.epic { --rc: rgba(216,138,255,1); }
.upgrade-choice .u-ring,
.upgrade-choice .usp { display: none; }
.upgrade-choice.rare .u-ring,
.upgrade-choice.epic .u-ring { display: block; }
.upgrade-choice { position: relative; }
.upgrade-choice .u-ring {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: conic-gradient(from 0deg, transparent 0deg, var(--rc) 42deg, transparent 84deg);
  animation: ringSpin 2.6s linear infinite;
  opacity: .38;
  pointer-events: none;
}
.upgrade-choice .u-ring.r2 {
  background: conic-gradient(from 180deg, transparent 0deg, var(--rc) 42deg, transparent 84deg);
  animation-duration: 3.8s;
  animation-direction: reverse;
  opacity: .22;
}
.upgrade-choice.epic .u-ring { animation-duration: 1.6s; }
.upgrade-choice.epic .u-ring.r2 { animation-duration: 2.4s; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

.upgrade-choice.rare .usp,
.upgrade-choice.epic .usp { display: block; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 6px var(--rc); opacity: 0; animation: spk 2.2s ease infinite; z-index: 2; }
.upgrade-choice .u1 { left: 7%; top: 22%; }
.upgrade-choice .u2 { left: 16%; top: 70%; animation-delay: .5s; }
.upgrade-choice .u3 { right: 22%; top: 18%; animation-delay: 1s; }
.upgrade-choice .u4 { right: 9%; top: 64%; animation-delay: 1.5s; }
@keyframes spk {
  0% { transform: scale(0) translateY(0); opacity: 0; }
  35% { transform: scale(1.5) translateY(-7px); opacity: 1; }
  100% { transform: scale(0) translateY(-14px); opacity: 0; }
}
.upgrade-choice .u-icon,
.upgrade-choice .u-main,
.upgrade-choice .u-lv { position: relative; z-index: 1; }
.upgrade-choice .u-name { text-shadow: 0 0 9px var(--rc), 1px 1px 0 rgba(0,0,0,.5); }
.upgrade-choice.epic .u-icon { animation: iconBounce 1.4s ease infinite; display: block; }
@keyframes iconBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
  50% { transform: translateY(-4px) rotate(5deg) scale(1.15); }
}
.upgrade-choice.epic { animation: epicPulse 1.6s ease infinite; }
@keyframes epicPulse {
  0%, 100% { box-shadow: inset 0 0 12px rgba(200,120,255,.35); }
  50% { box-shadow: inset 0 0 22px rgba(200,120,255,.6); }
}