/* ===== 失物招领 / LOST & FOUND ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #05060d;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", sans-serif;
  color: #e8e4d8;
  -webkit-font-smoothing: antialiased;
}
.site-return{position:fixed;z-index:10;top:16px;left:16px;padding:10px 14px;border-radius:10px;background:#ff4937;color:#111;text-decoration:none;font:800 14px Arial,"Microsoft YaHei",sans-serif;box-shadow:3px 4px 0 #a02b22}
.game-home{position:fixed;z-index:11;top:16px;right:16px;padding:10px 14px;border:1px solid #c9ff39;background:#0a0a0a;color:#c9ff39;text-decoration:none;font:700 12px Arial,sans-serif;letter-spacing:1px}

#wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0a0c18 0%, #03040a 100%);
}

#stage {
  position: relative;
  /* 480x270 按整数倍放大，由 JS 动态设置宽高 */
  width: min(960px, 100vw);
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  background: #000;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 0 2px #1a1d2a;
  overflow: hidden;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: #0a0c18;
  touch-action: manipulation;
}

/* ===== 覆盖层通用 ===== */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 5, 12, 0.78);
  z-index: 10;
  pointer-events: auto;
}

.overlay.hidden {
  display: none;
}

/* ===== 开始界面 ===== */
.start-inner {
  text-align: center;
  padding: 20px;
}

.title {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 12px;
  color: #d4b87a;
  text-shadow: 0 0 24px rgba(212, 184, 122, 0.35), 0 0 4px rgba(139, 58, 58, 0.6);
  margin-bottom: 4px;
}

.sub {
  font-size: 18px;
  letter-spacing: 8px;
  color: #6a7090;
  margin-bottom: 40px;
  font-family: "Courier New", monospace;
}

.time {
  font-size: 22px;
  color: #8b3a3a;
  margin-bottom: 48px;
  letter-spacing: 4px;
  font-family: "Courier New", monospace;
}

.hint {
  margin-top: 28px;
  font-size: 13px;
  color: #5a5f7a;
  letter-spacing: 2px;
}

/* ===== 按钮 ===== */
.btn-main {
  display: inline-block;
  padding: 12px 36px;
  font-size: 18px;
  font-family: inherit;
  color: #0a0c18;
  background: #c9a961;
  border: none;
  cursor: pointer;
  letter-spacing: 4px;
  font-weight: 700;
  transition: all 0.15s;
  box-shadow: 0 4px 0 #5a4a22;
}

.btn-main:hover {
  background: #e0c07a;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #5a4a22;
}

.btn-main:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #5a4a22;
}

.btn-sub {
  display: inline-block;
  padding: 10px 24px;
  font-size: 15px;
  font-family: inherit;
  color: #c9a961;
  background: transparent;
  border: 2px solid #5a4a22;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.15s;
}

.btn-sub:hover {
  background: rgba(201, 169, 97, 0.12);
  border-color: #c9a961;
}

/* ===== 物品查看框 ===== */
.inspect-box {
  width: 360px;
  background: #12141f;
  border: 2px solid #3a3d52;
  padding: 18px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.inspect-title {
  font-size: 18px;
  color: #d4b87a;
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: 2px;
}

#inspect-canvas {
  display: block;
  width: 320px;
  height: 240px;
  margin: 0 auto 12px;
  background: #0a0c18;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid #2a2d42;
}

.inspect-desc {
  font-size: 14px;
  color: #a8a8b8;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 16px;
  min-height: 48px;
}

.inspect-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.inspect-btns .btn-sub {
  padding: 8px 18px;
  font-size: 13px;
}

/* ===== 结局界面 ===== */
.ending-inner {
  text-align: center;
  padding: 20px;
}

.ending-text {
  font-size: 22px;
  color: #c9a961;
  margin-bottom: 18px;
  letter-spacing: 4px;
  animation: fadeIn 1.2s ease;
}

.ending-title {
  font-size: 40px;
  color: #8b3a3a;
  margin-bottom: 48px;
  letter-spacing: 8px;
  animation: fadeIn 1.6s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 静音按钮 ===== */
.mute-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(20, 22, 36, 0.8);
  border: 1px solid #3a3d52;
  color: #c9a961;
  font-size: 14px;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mute-btn:hover {
  background: rgba(40, 42, 60, 0.9);
}

.mute-btn.muted {
  color: #5a5f7a;
}

/* ===== 返回作品集链接 ===== */
.back-home {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 30;
  font-size: 12px;
  letter-spacing: 2px;
  color: #5a5f7a;
  text-decoration: none;
  font-family: "Courier New", monospace;
  transition: color 0.2s;
}

.back-home:hover {
  color: #c9a961;
}

@media (max-width: 560px) {
  .back-home {
    top: 8px;
    left: 10px;
    font-size: 10px;
  }
}

/* ===== 小屏适配：舞台等比缩小后，覆盖层文字同步缩小 ===== */
@media (max-width: 495px) {
  .game-home{top:10px;right:10px;padding:8px 10px;font-size:10px}
  .start-inner { padding: 10px; }
  .title { font-size: 38px; letter-spacing: 6px; margin-bottom: 2px; }
  .sub { font-size: 13px; letter-spacing: 5px; margin-bottom: 20px; }
  .time { font-size: 15px; letter-spacing: 3px; margin-bottom: 24px; }
  .btn-main { font-size: 14px; padding: 9px 22px; letter-spacing: 3px; }
  .hint { font-size: 10px; margin-top: 14px; letter-spacing: 1px; }

  .inspect-box { width: 300px; padding: 12px; }
  .inspect-title { font-size: 14px; margin-bottom: 8px; }
  #inspect-canvas { width: 240px; height: 180px; margin-bottom: 8px; }
  .inspect-desc { font-size: 12px; line-height: 1.6; min-height: 38px; margin-bottom: 10px; }
  .inspect-btns { gap: 6px; }
  .inspect-btns .btn-sub { padding: 7px 12px; font-size: 12px; }

  .ending-text { font-size: 15px; margin-bottom: 12px; }
  .ending-title { font-size: 26px; letter-spacing: 5px; margin-bottom: 30px; }
}

/* Keep navigation outside the playable 16:9 scene, including phone landscape. */
body{padding:60px 8px 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.site-return,.game-home{top:12px;min-height:34px;padding:8px 12px;border:1px solid #494949;border-radius:0;background:#111;color:#efefea;box-shadow:none;font:700 11px/18px 'Microsoft YaHei',sans-serif;letter-spacing:0}
.site-return{left:12px}.game-home{right:12px;color:#c9ff39;border-color:#7b972f}
.site-return:hover,.game-home:hover{background:#c9ff39;color:#080808}
.site-return:focus-visible,.game-home:focus-visible{outline:2px solid #c9ff39;outline-offset:3px}
#wrap{height:100%;background:transparent}
#stage{position:relative;inset:auto;flex:none;width:min(calc(100vw - 16px),calc((100svh - 76px) * 16 / 9));height:auto;aspect-ratio:16/9;max-width:none;max-height:none;margin:auto;border-radius:2px}
#game{width:100%;height:100%;aspect-ratio:16/9;box-shadow:none}
#stage>.hint{bottom:5px;max-width:96%;white-space:normal;text-align:center;font-size:10px;line-height:1.4;padding:3px 8px;letter-spacing:0}
.start-inner{padding:8px}.start-inner .title{font-size:40px;letter-spacing:4px;margin-bottom:2px}.start-inner .sub{font-size:13px;letter-spacing:3px;margin-bottom:10px}.start-inner .time{font-size:15px;letter-spacing:2px;margin-bottom:12px}.start-inner .hint{font-size:10px;margin-top:10px;letter-spacing:0}.start-inner .btn-main{font-size:14px;padding:8px 20px;letter-spacing:1px}
@media(max-width:600px),(max-height:600px){
 #inspect-panel{position:fixed;inset:56px 8px 8px;overflow:auto;align-items:center;z-index:30}
 .inspect-box{width:min(400px,100%);max-height:100%;overflow:auto;padding:12px}
 #inspect-canvas{max-width:100%;width:160px;height:120px;margin:0 auto 8px}
 .inspect-title{margin-bottom:6px}.inspect-desc{font-size:12px;min-height:0;margin-bottom:8px}
 .inspect-btns{gap:6px;flex-wrap:wrap;justify-content:center}.inspect-btns button{padding:7px 12px!important;font-size:12px!important}
 .ending-title{font-size:24px;margin-bottom:14px}.ending-text{font-size:13px;margin-bottom:10px}
}
@media(max-width:400px){.start-inner .title{font-size:26px}.start-inner .sub{font-size:10px;margin-bottom:6px}.start-inner .time{font-size:12px;margin-bottom:8px}.start-inner .hint{font-size:8px;margin-top:7px}.start-inner .btn-main{font-size:12px;padding:6px 16px}}