:root {
  --sy-blue: #2967dc;
  --sy-cyan: #54cfff;
  --sy-gold: #ffcb55;
  --sy-ink: #17366d;
}

#shuiyuLobby {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  overflow: hidden;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.92) 0 4%, transparent 14%),
    radial-gradient(circle at 82% 27%, rgba(255,255,255,.72) 0 5%, transparent 16%),
    linear-gradient(180deg, #428ce9 0%, #8edcff 43%, #eaf9ff 70%, #86d7b2 100%);
  user-select: none;
}

#shuiyuLobby::before,
#shuiyuLobby::after {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: 8%;
  height: 34%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(70,189,151,.84));
  transform: rotate(-5deg);
  opacity: .88;
}

#shuiyuLobby::after {
  left: 28%;
  right: -32%;
  bottom: 4%;
  height: 28%;
  background: linear-gradient(155deg, rgba(53,165,224,.52), rgba(28,127,111,.9));
  transform: rotate(8deg);
}

.sy-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  height: 100%;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.sy-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(26,65,150,.86), rgba(47,113,211,.7));
  box-shadow: 0 10px 28px rgba(20,61,123,.25), inset 0 1px rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
}

.sy-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 3px solid #ffe78c;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #b9d8ff);
  box-shadow: 0 3px 10px rgba(0,0,0,.24);
}

.sy-user { min-width: 0; flex: 1; }
.sy-user-name { overflow: hidden; font-weight: 800; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; }
.sy-user-id { margin-top: 3px; color: #dceaff; font-size: 12px; }

.sy-wallet { display: flex; flex-direction: column; gap: 5px; }
.sy-wallet span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 88px;
  padding: 4px 9px;
  border-radius: 14px;
  background: rgba(10,36,91,.5);
  font-weight: 700;
  font-size: 13px;
}
.sy-wallet b { color: var(--sy-gold); }

.sy-brand { margin: 24px 0 15px; text-align: center; text-shadow: 0 4px 12px rgba(22,72,144,.45); }
.sy-brand strong { display: block; font-size: clamp(32px, 9vw, 48px); letter-spacing: 4px; }
.sy-brand small { color: #eef8ff; font-weight: 700; letter-spacing: 5px; }

.sy-main-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 12px;
  min-height: 300px;
}

.sy-primary,
.sy-feature {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 22px;
  box-shadow: 0 12px 25px rgba(28,74,145,.26), inset 0 0 24px rgba(255,255,255,.17);
}

.sy-primary {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 33%, #fff 0 5%, transparent 6%),
    radial-gradient(circle at 35% 42%, #f9d66b 0 9%, transparent 10%),
    linear-gradient(155deg, #6ed7ff, #3177dc 70%);
}
.sy-primary::before { content: "水\A 鱼"; white-space: pre; position: absolute; inset: 18px auto auto 20px; color: rgba(255,255,255,.94); font-size: 52px; font-weight: 900; line-height: .9; transform: rotate(-8deg); text-shadow: 0 6px 0 rgba(31,91,184,.28); }
.sy-primary h2 { position: relative; margin: 0 0 12px; font-size: 28px; }

.sy-btn {
  position: relative;
  border: 0;
  border-radius: 14px;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sy-btn:active { transform: translateY(2px) scale(.99); }
.sy-create { padding: 15px 12px; background: linear-gradient(#ffb44c, #f17327); box-shadow: 0 5px 0 #b94b1d, inset 0 1px rgba(255,255,255,.55); font-size: 20px; }
.sy-join { margin-top: 10px; padding: 12px; background: linear-gradient(#6bb6ff, #436fe0); box-shadow: 0 4px 0 #294fae; font-size: 18px; }

.sy-side { display: grid; grid-template-rows: 1.15fr .85fr; gap: 12px; }
.sy-feature { display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; text-align: left; }
.sy-feature strong { font-size: 21px; }
.sy-feature small { margin-top: 4px; color: rgba(255,255,255,.82); }
.sy-feature-main { background: linear-gradient(145deg, #ff8a63, #e14955); }
.sy-feature-main::before { content: "中"; position: absolute; top: 12%; right: 12%; color: rgba(255,255,255,.86); font-size: 76px; font-weight: 900; transform: rotate(8deg); }
.sy-feature-alt { color: #654018; background: linear-gradient(145deg, #fff5bf, #ffc35f); }
.sy-feature-alt small { color: #8b612d; }

.sy-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 13px;
}
.sy-quick button { padding: 12px 6px; border: 1px solid rgba(255,255,255,.7); border-radius: 15px; color: var(--sy-ink); background: rgba(255,255,255,.86); box-shadow: 0 6px 16px rgba(30,93,147,.18); font: inherit; font-weight: 800; }
.sy-quick i { display: block; margin-bottom: 4px; font-style: normal; font-size: 24px; }

.sy-spacer { flex: 1; min-height: 18px; }
.sy-bottom {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 9px 6px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  background: rgba(31,74,145,.82);
  box-shadow: 0 9px 24px rgba(13,49,103,.3);
  backdrop-filter: blur(10px);
}
.sy-bottom button { border: 0; color: #fff; background: transparent; font: inherit; font-size: 12px; font-weight: 700; }
.sy-bottom i { display: block; margin-bottom: 3px; font-style: normal; font-size: 21px; }

.sy-toast {
  position: absolute;
  left: 50%;
  bottom: 105px;
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(11,31,66,.88);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: .2s;
  pointer-events: none;
}
.sy-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 690px) {
  .sy-brand { margin: 10px 0; }
  .sy-brand strong { font-size: 30px; }
  .sy-main-grid { min-height: 260px; }
  .sy-quick { margin-top: 8px; }
}

@media (orientation: landscape) and (min-width: 700px) {
  .sy-shell { width: min(100%, 1120px); max-width: none; }
  .sy-brand { margin: 9px 0; }
  .sy-main-grid { width: min(75%, 790px); align-self: center; min-height: 300px; }
  .sy-quick { width: min(75%, 790px); align-self: center; }
}