/* ============================================================
   靓仔模拟器 · 港式招牌 / 霓虹风格
   主色: 朱红 #c8102e / 金黄 #f0b429 / 墨绿 #1f5c3d / 米白 #faf3e3
   ============================================================ */

:root {
  --red: #c8102e;
  --red-dark: #8f0a20;
  --gold: #f0b429;
  --gold-light: #ffd970;
  --green: #1f5c3d;
  --green-light: #2e7d54;
  --cream: #faf3e3;
  --ink: #2b1d12;
  --ink-soft: #4a3a28;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
}

.hidden { display: none !important; }

#app { height: 100vh; position: relative; }

/* ============ 通用屏幕 ============ */
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #fdf6e6 0%, #f5e3c3 55%, #ecd3a8 100%);
}
.screen.active { display: flex; }

/* 标题界面：夜色暗底 + 霓虹亮字（招牌感的正确打开方式） */
#screen-title {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(240,180,41,.16), transparent 55%),
    radial-gradient(ellipse at 8% 88%, rgba(200,16,46,.22), transparent 45%),
    radial-gradient(ellipse at 94% 72%, rgba(240,180,41,.12), transparent 42%),
    radial-gradient(ellipse at 70% 30%, rgba(46,125,84,.25), transparent 40%),
    linear-gradient(175deg, #132e25 0%, #0e241c 45%, #091a14 100%);
  overflow: hidden;
}
/* 星光点点 */
#screen-title::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,240,190,.9), transparent 60%),
    radial-gradient(1px 1px at 28% 8%, rgba(255,240,190,.7), transparent 60%),
    radial-gradient(2px 2px at 44% 24%, rgba(255,240,190,.8), transparent 60%),
    radial-gradient(1px 1px at 63% 12%, rgba(255,240,190,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 20%, rgba(255,240,190,.8), transparent 60%),
    radial-gradient(1px 1px at 91% 10%, rgba(255,240,190,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 42%, rgba(255,240,190,.5), transparent 60%),
    radial-gradient(1px 1px at 55% 38%, rgba(255,240,190,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 44%, rgba(255,240,190,.5), transparent 60%),
    radial-gradient(1px 1px at 36% 60%, rgba(255,240,190,.4), transparent 60%);
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: .55; }
  to { opacity: 1; }
}
/* 城市天际线剪影（骑楼 + 招牌灯柱） */
#screen-title::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 21vh;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='xMidYMax slice'><path fill='rgba(0,0,0,0.55)' d='M0,320 L0,240 L60,240 L60,180 L120,180 L120,240 L200,240 L200,210 L260,210 L260,240 L340,240 L340,150 L400,150 L400,240 L480,240 L480,190 L540,190 L540,240 L620,240 L620,170 L680,170 L680,240 L760,240 L760,210 L820,210 L820,240 L900,240 L900,160 L960,160 L960,240 L1040,240 L1040,200 L1100,200 L1100,240 L1180,240 L1180,230 L1240,230 L1240,240 L1320,240 L1320,180 L1380,180 L1380,240 L1440,240 L1440,320 Z'/></svg>");
  background-size: cover;
  background-position: bottom;
  opacity: .85;
}
/* 底部边缘淡出，让剪影融入夜色 */
#screen-title > * { position: relative; z-index: 2; }
#screen-title .title-sub {
  color: #d9c9a3;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#screen-title .title-foot {
  color: #a89a78;
}

/* ============ 霓虹招牌 ============ */
.neon-sign {
  text-align: center;
  transform: rotate(-2deg);
  padding: 10px 40px;
}
/* 「靓仔」= 霓虹灯管：亮白内芯 + 金黄/朱红双色辉光 + 灯管描边 */
.neon-line1 {
  font-size: clamp(72px, 16vw, 150px);
  font-weight: 900;
  color: #fffbe8;
  -webkit-text-stroke: 2px #ffd970;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #ffd970,
    0 0 26px #f0b429,
    0 0 48px #e8920c,
    0 0 80px #c8102e,
    0 0 120px rgba(200, 16, 46, .75);
  letter-spacing: 0.12em;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
  animation: neon-flicker 4.5s infinite;
}
.neon-line2 {
  margin-top: -6px;
  font-size: clamp(30px, 6vw, 58px);
  font-weight: 800;
  color: #ffecb0;
  -webkit-text-stroke: 1px #f0b429;
  text-shadow:
    0 0 6px #f0b429,
    0 0 18px #e8920c,
    0 0 38px rgba(200,16,46,.85),
    0 0 60px rgba(200,16,46,.5);
  letter-spacing: 0.35em;
  padding-left: 0.35em;
}
@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.75; }
  94% { opacity: 1; }
  96% { opacity: 0.85; }
  97% { opacity: 1; }
}

.title-sub {
  margin-top: 18px;
  font-size: clamp(14px, 2.4vw, 20px);
  color: var(--ink-soft);
  letter-spacing: 0.2em;
}

/* 灯笼 */
.lanterns {
  display: flex; gap: 18px;
  margin: 42px 0 46px;
}
.lantern {
  width: 52px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ff6a6a, var(--red) 70%);
  color: #ffe9a8;
  font-size: 24px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(200,16,46,.4), inset 0 -6px 12px rgba(0,0,0,.18);
  position: relative;
  animation: sway 3s ease-in-out infinite;
}
.lantern:nth-child(even) { animation-delay: .4s; }
.lantern::before {
  content: ""; position: absolute; top: -12px; width: 2px; height: 12px; background: #8a6a3a;
}
@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* 主按钮 */
.btn-main {
  font-family: inherit;
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 800;
  color: var(--gold-light);
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  border: 3px solid var(--gold);
  border-radius: 14px;
  padding: 16px 56px;
  cursor: pointer;
  letter-spacing: 0.15em;
  box-shadow: 0 8px 0 #5c0713, 0 12px 24px rgba(140,20,30,.35);
  transition: transform .1s, box-shadow .1s;
}
.btn-main:hover { transform: translateY(-2px); }
.btn-main:active { transform: translateY(6px); box-shadow: 0 2px 0 #5c0713; }

.title-foot { margin-top: 26px; font-size: 14px; color: var(--ink-soft); }

/* ============ HUD ============ */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(31,92,61,.92), rgba(31,92,61,.72));
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.hud-left { display: flex; align-items: center; gap: 14px; }
.sign-title-mini {
  font-size: 26px; font-weight: 900;
  color: var(--gold-light);
  text-shadow: 0 0 8px rgba(240,180,41,.9), 0 0 20px rgba(200,16,46,.7);
  transform: rotate(-2deg);
}
.hud-confidence-wrap { display: flex; flex-direction: column; gap: 3px; }
.conf-label { font-size: 11px; color: var(--cream); opacity: .9; letter-spacing: .2em; }
.conf-bar {
  width: clamp(160px, 26vw, 320px);
  height: 20px;
  background: #12382a;
  border: 2px solid var(--gold);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 0 10px rgba(240,180,41,.25);
}
.conf-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7b00, var(--gold) 60%, #fff2b0);
  box-shadow: 0 0 12px rgba(255,180,0,.8);
  transition: width .6s cubic-bezier(.2,.9,.3,1.2);
  position: relative;
}
.conf-fill::after {
  content: ""; position: absolute; right: 4px; top: 2px; bottom: 2px; width: 10px;
  border-radius: 999px; background: rgba(255,255,255,.55);
}
.conf-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.hud-right { display: flex; align-items: center; gap: 10px; }
.title-badge {
  font-size: 15px; font-weight: 800;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  animation: badge-glow 2.5s ease-in-out infinite;
}
@keyframes badge-glow {
  0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 rgba(240,180,41,0); }
  50% { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 18px rgba(240,180,41,.85); }
}
.icon-btn {
  font-family: inherit;
  font-size: 14px;
  color: var(--cream);
  background: rgba(0,0,0,.28);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .15s;
}
.icon-btn:hover { background: rgba(0,0,0,.5); }
.icon-btn.on { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 800; }

/* ============ 地图界面 ============ */
#screen-map {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(240,180,41,.12), transparent 55%),
    radial-gradient(ellipse at 12% 100%, rgba(200,16,46,.16), transparent 45%),
    linear-gradient(175deg, #132e25 0%, #0e241c 50%, #0a1b15 100%);
}
.map-header { text-align: center; margin-bottom: 30px; }
.map-title {
  font-size: clamp(26px, 4.8vw, 42px);
  font-weight: 900;
  color: var(--gold-light);
  text-shadow: 0 0 14px rgba(240,180,41,.55), 0 0 34px rgba(200,16,46,.5), 0 2px 4px rgba(0,0,0,.6);
}
.map-sub { margin-top: 8px; font-size: 15px; color: #cbb98e; letter-spacing: .15em; }

.scene-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  width: min(1080px, 94vw);
  max-height: 66vh;
  overflow-y: auto;
  padding: 6px;
}
.scene-card {
  position: relative;
  width: calc((100% - 52px) / 3);
  min-width: 260px;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: 4px solid var(--gold);
  box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 0 2.5px var(--red), 0 0 22px rgba(240,180,41,.22);
  transition: transform .15s;
  background: linear-gradient(140deg, var(--green), var(--ink));
}
.scene-card:hover { transform: translateY(-4px) rotate(-1deg); }
.scene-card .card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .9;
  transition: opacity .2s;
}
.scene-card .card-bg.placeholder {
  background: linear-gradient(140deg, var(--green-light), var(--green));
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; opacity: 1;
}
.scene-card .card-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.8));
  color: var(--gold-light);
  font-size: 25px; font-weight: 900;
  text-align: center;
  letter-spacing: .1em;
  text-shadow: 0 2px 4px #000;
}
.scene-card .card-npc {
  position: absolute; top: 8px; right: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--cream);
  background: rgba(31,92,61,.85);
  border-radius: 999px; padding: 3px 10px;
}

/* ============ 场景界面 ============ */
#screen-scene { background: #000; }
.scene-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.scene-bg.placeholder {
  background: linear-gradient(160deg, #2e7d54, #1f5c3d 60%, #12382a);
  display: flex; align-items: center; justify-content: center;
  font-size: 90px;
}
.scene-top {
  position: absolute; top: 70px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
}
.btn-back {
  font-family: inherit;
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.btn-back:hover { background: #fff; }
.scene-name {
  font-size: clamp(22px, 3.6vw, 32px);
  font-weight: 900;
  color: var(--gold-light);
  background: rgba(0,0,0,.55);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 6px 22px;
  letter-spacing: .2em;
  text-shadow: 0 0 10px rgba(240,180,41,.7);
}

.npc-row {
  position: absolute; left: 0; right: 0;
  bottom: clamp(36px, 9vh, 96px);
  display: flex; justify-content: center; align-items: flex-start; gap: clamp(36px, 8vw, 96px);
  padding: 12px 18px;
  z-index: 10;
}
.npc-card {
  width: clamp(200px, 25vw, 280px);
  text-align: center;
  cursor: pointer;
  transition: transform .15s;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.npc-card:hover { transform: translateY(-8px) scale(1.04); }
.npc-card .npc-avatar {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 16px;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 3px var(--red), 0 0 26px rgba(240, 180, 41, .45), 0 12px 26px rgba(0,0,0,.45);
  background-size: cover; background-position: center top;
  background-color: var(--cream);
}
.npc-card .npc-avatar.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  background: linear-gradient(140deg, #fdf6e6, #f0d9a8);
}
.npc-card .npc-avatar.placeholder::before {
  content: "";
  position: absolute;
  width: 82%; height: 82%;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.9), rgba(240,217,168,.4));
  box-shadow: 0 4px 14px rgba(0,0,0,.12), inset 0 0 0 2px rgba(240,180,41,.35);
}
.npc-card .npc-tag {
  display: block;
  margin: 12px auto 0;
  width: fit-content;
  min-width: 104px;
  font-size: 17px; font-weight: 800;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 6px 18px;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  white-space: nowrap;
}
.npc-card .npc-line {
  display: inline-block;
  margin-top: 9px;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .5);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}

/* ============ 夸夸卡片 ============ */
#praise-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(12, 6, 3, .78);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.praise-card {
  display: flex; gap: 26px;
  background: linear-gradient(160deg, #fff8e8, #f7e6c0);
  border: 5px solid var(--gold);
  border-radius: 22px;
  padding: 26px;
  width: min(760px, 92vw);
  max-height: 86vh;
  box-shadow: 0 0 0 3px var(--red), 0 20px 50px rgba(0,0,0,.5), 0 0 60px rgba(240,180,41,.35);
  animation: card-pop .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes card-pop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.praise-npc-img {
  flex: 0 0 clamp(150px, 26vw, 230px);
  aspect-ratio: 3/4;
  border-radius: 14px;
  border: 3px solid var(--red);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  background-size: cover; background-position: center top;
  background-color: var(--cream);
}
.praise-npc-img.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
  background: linear-gradient(140deg, #fdf6e6, #f0d9a8);
}
.praise-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.praise-npc-name { font-size: 28px; font-weight: 900; color: var(--red); }
.praise-npc-title { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.praise-bubble {
  position: relative;
  background: #fff;
  border: 2.5px solid var(--green);
  border-radius: 16px;
  padding: 18px 20px;
  flex: 1;
  box-shadow: inset 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,.12);
  overflow-y: auto;
}
.praise-bubble::before {
  content: ""; position: absolute; left: -14px; top: 26px;
  border: 8px solid transparent; border-right-color: var(--green);
}
.praise-text { font-size: clamp(17px, 2.8vw, 23px); font-weight: 700; line-height: 1.7; color: var(--ink); }
.praise-sub {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  border-top: 1px dashed #d8c49a;
  padding-top: 8px;
  line-height: 1.6;
}
.praise-gain {
  align-self: flex-end;
  font-size: 26px; font-weight: 900;
  color: var(--red);
  text-shadow: 0 0 10px rgba(200,16,46,.4);
  margin-top: 8px;
  animation: gain-pop .8s ease;
}
@keyframes gain-pop {
  0% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.praise-btns { display: flex; gap: 12px; margin-top: 12px; }
.btn-small {
  font-family: inherit;
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink-soft);
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
}
.btn-small:hover { background: #fdf3dc; }
.btn-primary {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  color: var(--gold-light);
  border-color: var(--gold);
}
.btn-primary:hover { background: linear-gradient(180deg, #e01a38, var(--red-dark)); }

/* 爱心特效 */
#hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.heart {
  position: absolute;
  font-size: 26px;
  animation: heart-float 1.6s ease-out forwards;
  text-shadow: 0 0 8px rgba(255,80,80,.8);
}
@keyframes heart-float {
  0% { transform: translateY(0) scale(.6); opacity: 1; }
  100% { transform: translateY(-140px) scale(1.4); opacity: 0; }
}

/* ============ 结局界面 ============ */
#screen-ending { background: linear-gradient(160deg, #1f5c3d, #12382a 60%, #0c2a1e); }
.ending-title {
  font-size: clamp(36px, 7.5vw, 72px);
  font-weight: 900;
  color: var(--gold-light);
  text-shadow: 0 0 16px rgba(240,180,41,.9), 0 0 50px rgba(240,180,41,.5);
  letter-spacing: .12em;
  padding: 0 4vw;
  text-align: center;
  animation: ending-shine 2s ease-in-out infinite;
}
@keyframes ending-shine {
  0%,100% { text-shadow: 0 0 16px rgba(240,180,41,.9), 0 0 50px rgba(240,180,41,.5); }
  50% { text-shadow: 0 0 26px rgba(255,240,200,1), 0 0 70px rgba(240,180,41,.8); }
}
.ending-crowd {
  margin: 30px 6vw 14px;
  font-size: clamp(20px, 3.6vw, 32px);
  font-weight: 900;
  color: #fff;
  letter-spacing: .22em;
  line-height: 2;
  text-align: center;
  animation: crowd-shout 1.2s ease-in-out infinite;
}
@keyframes crowd-shout {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.12); text-shadow: 0 0 30px rgba(255,200,60,.9); }
}
.ending-text { font-size: 17px; color: var(--cream); opacity: .9; margin-top: 8px; letter-spacing: .2em; }
.ending-text2 { font-size: 15px; color: var(--gold-light); margin-top: 6px; letter-spacing: .2em; }
.ending-inner .btn-main { margin-top: 40px; }
#confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-piece {
  position: absolute;
  width: 10px; height: 16px;
  top: -30px;
  opacity: .95;
  animation: confetti-fall linear infinite;
}
@keyframes confetti-fall {
  0% { transform: translateY(-30px) rotate(0); }
  100% { transform: translateY(105vh) rotate(720deg); }
}

/* ============ 移动端适配 ============ */
@media (max-width: 640px) {
  .praise-card { flex-direction: column; align-items: center; text-align: center; padding: 18px; gap: 14px; }
  .praise-npc-img { width: 130px; }
  .praise-bubble::before { display: none; }
  .praise-btns { justify-content: center; }
  .npc-row { gap: 16px; bottom: 14px; padding: 8px 12px; }
  .npc-card { width: clamp(120px, 30vw, 160px); }
  .hud-right .icon-btn { font-size: 12px; padding: 6px 10px; }
  .title-badge { font-size: 12px; padding: 5px 10px; }
}