/* 隐 · 庭院与祠堂 — UI 样式 */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#1c241d; font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif; }

#game {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, #2c3e2e 0%, #16201a 70%);
}
#screen {
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(100vh, calc(100vw * 9 / 16));
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#3a4a3c;
  touch-action:none;
  outline:none;
  border-radius:4px;
  box-shadow:0 0 40px rgba(0,0,0,.6);
}

/* —— 交互提示 —— */
#hint {
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(20,28,20,.88); color:#e8f0e0;
  padding:8px 14px; border-radius:10px; font-size:15px;
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none; z-index:20;
}
#hint-key {
  background:#d9b44a; color:#1c241d; font-weight:700;
  padding:2px 9px; border-radius:6px; font-size:14px;
}
#hint[hidden] { display:none; }

/* —— 小地图 —— */
#minimap {
  position:absolute; right:8px; top:8px; z-index:15;
  background:rgba(18,24,18,.82); border:1px solid rgba(255,255,255,.22);
  border-radius:8px; padding:3px; cursor:pointer;
}
#minimap-canvas { display:block; image-rendering:pixelated; border-radius:5px; width:240px; height:180px; }

/* —— 大地图 —— */
#bigmap {
  position:absolute; inset:0; z-index:40;
  background:rgba(10,14,10,.78); display:flex; align-items:center; justify-content:center;
}
#bigmap[hidden] { display:none; }
#bigmap-inner { position:relative; background:#22301f; padding:16px; border-radius:14px; border:2px solid #d9b44a; }
#bigmap-canvas { display:block; image-rendering:pixelated; width:min(88vw,60vh); height:auto; }
#bigmap-title { text-align:center; color:#f0e8c8; font-size:20px; font-weight:700; letter-spacing:6px; margin:8px 0 4px; }
#bigmap-legend { color:#cfd8c4; font-size:13px; line-height:1.7; padding:0 6px; }
#bigmap-legend b { color:#ffd76a; }
#bigmap-close {
  position:absolute; top:8px; right:8px; background:#d9b44a; color:#1c241d;
  border:none; border-radius:8px; padding:6px 12px; font-size:14px; font-weight:700; cursor:pointer;
}

/* —— 虚拟摇杆（位置上移 + 缩小区域，避免与手指/点击冲突） —— */
#joystick { position:absolute; left:0; bottom:0; width:38%; height:52%; z-index:25; touch-action:none; }
#joystick[hidden] { display:none; }
#stick-base {
  position:absolute; left:90px; bottom:240px; width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
#stick-knob {
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.35); border:2px solid rgba(255,255,255,.6);
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* —— 照片墙 —— */
#photos {
  position:absolute; inset:0; z-index:45;
  background:rgba(8,10,8,.82); display:flex; align-items:center; justify-content:center;
}
#photos[hidden] { display:none; }
#photos-inner {
  background:#2b241c; border:2px solid #a8844a; border-radius:14px;
  padding:14px 18px 16px; max-width:min(92vw, 640px); width:100%;
  position:relative; color:#e8ddc0;
}
#photos-inner h2 { text-align:center; letter-spacing:4px; font-size:19px; margin-bottom:10px; color:#ffd76a; }
#photos-stage {
  background:#1a1610; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:200px; border:1px solid #5a4426;
}
#photos-stage canvas { image-rendering:pixelated; display:block; max-width:100%; }
#photos-caption { text-align:center; font-size:14px; line-height:1.7; margin:10px 0 6px; min-height:2.4em; color:#d8ccae; }
#photos-nav { display:flex; align-items:center; justify-content:center; gap:18px; }
#photos-nav button, #photos-close {
  background:#a8844a; color:#241a0c; border:none; border-radius:8px;
  padding:8px 16px; font-size:15px; font-weight:700; cursor:pointer;
}
#photos-close { position:absolute; top:8px; right:10px; padding:5px 10px; }
#photos-count { color:#ffd76a; font-size:14px; min-width:52px; text-align:center; }

/* —— 开始画面 —— */
#boot {
  position:absolute; inset:0; z-index:60; background:rgba(10,14,10,.85);
  display:flex; align-items:center; justify-content:center;
}
#boot[hidden] { display:none; }
#boot-inner { text-align:center; color:#e8f0e0; padding:20px; max-width:520px; }
#boot-inner h1 {
  font-size:64px; letter-spacing:28px; color:#ffd76a; text-shadow:0 4px 0 #5a4426; margin-bottom:6px;
}
#boot-inner p { font-size:16px; margin-bottom:20px; color:#cfd8c4; letter-spacing:2px; }
#boot-controls {
  background:rgba(255,255,255,.06); border-radius:12px; padding:12px 16px;
  font-size:14px; line-height:2; text-align:left; margin-bottom:22px; color:#d8dec8;
}
#boot-controls b { color:#ffd76a; }
#boot-start {
  background:#d9b44a; color:#1c241d; border:none; border-radius:12px;
  padding:14px 64px; font-size:22px; font-weight:800; letter-spacing:8px; cursor:pointer;
  box-shadow:0 5px 0 #8a6f2c;
}
#boot-start:active { transform:translateY(3px); box-shadow:0 2px 0 #8a6f2c; }

/* —— FPS —— */
#fps {
  position:absolute; right:8px; bottom:6px; z-index:15; font-size:11px;
  color:rgba(255,255,255,.55); background:rgba(0,0,0,.35); padding:2px 6px; border-radius:4px;
}
#fps[hidden] { display:none; }

/* 触屏优化：更大的摇杆热区、按钮 >=44px */
@media (pointer:coarse) {
  #hint-key, #hint { font-size:16px; padding:10px 16px; }
  #photos-nav button, #photos-close { padding:12px 20px; font-size:16px; }
  #bigmap-close { padding:10px 16px; font-size:16px; }
  #minimap { width:150px; }
  #minimap-canvas { width:150px; height:auto; }
}

/* —— 饮料小游戏（四时调饮） —— */
#drink-game {
  position:absolute; inset:0; z-index:52;
  background:rgba(8,12,8,.86);
  display:flex; align-items:center; justify-content:center;
  animation:drink-fade-in .35s ease;
}
#drink-game[hidden] { display:none; }
@keyframes drink-fade-in {
  from { opacity:0; backdrop-filter:blur(0); }
  to   { opacity:1; backdrop-filter:blur(2px); }
}
#drink-panel {
  animation:drink-slide-up .4s cubic-bezier(.2,.7,.3,1);
}
@keyframes drink-slide-up {
  from { transform:translateY(20px) scale(.97); opacity:0; }
  to   { transform:translateY(0)    scale(1);   opacity:1; }
}
.drink-season {
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s, background .25s;
}
.drink-season:hover {
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.15);
}
.drink-season:active {
  transform:translateY(0) scale(.98);
}
.drink-season::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 60%);
  pointer-events:none;
}
#drink-close {
  transition:background .2s, transform .15s;
}
#drink-close:hover {
  background:#a8844a !important; color:#1c1008 !important;
  transform:scale(1.05);
}
#drink-recipe .drink-recipe {
  transition:all .25s ease;
}
#drink-stage {
  transition:box-shadow .2s;
}
#drink-canvas {
  cursor:crosshair;
}
#drink-overlay-msg {
  transition:opacity .3s;
}