:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: #080b07;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background:
    radial-gradient(circle at 50% 40%, rgba(105, 125, 55, .18), transparent 45%),
    #080b07;
  user-select: none;
  touch-action: none;
}

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

canvas {
  display: block;
  width: min(100vw, calc(100vh * 1.578947));
  height: min(100vh, calc(100vw / 1.578947));
  background: #151a10;
  box-shadow: 0 0 80px #000;
  outline: none;
}

.topbar {
  pointer-events: none;
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, calc(100vh * 1.578947));
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timer {
  min-width: 132px;
  padding: 9px 18px 10px;
  border: 3px solid #6f4b19;
  border-radius: 14px 14px 26px 26px;
  background: linear-gradient(#e8b957, #b67724);
  color: #3b2710;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 1px #ffd986;
  box-shadow: inset 0 0 0 2px #f5d985, 0 5px 14px #0009;
}

.icon-button {
  pointer-events: auto;
  width: 47px;
  height: 47px;
  border: 2px solid #a97b2c;
  border-radius: 50%;
  background: #26331cdd;
  color: #e8c46d;
  font-size: 27px;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px #172012, 0 4px 12px #0008;
  cursor: pointer;
}

.panel-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 8, 4, .74);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.panel-overlay.visible { opacity: 1; pointer-events: auto; }

.stone-panel {
  position: relative;
  width: min(520px, calc(100vw - 34px));
  padding: 34px 38px;
  border: 7px solid #7f5b20;
  border-radius: 24px 12px 22px 14px;
  background:
    linear-gradient(135deg, transparent 0 13px, #ddb253 14px) top left,
    linear-gradient(225deg, transparent 0 11px, #ddb253 12px) top right,
    linear-gradient(45deg, transparent 0 10px, #c18b31 11px) bottom left,
    linear-gradient(315deg, transparent 0 15px, #c18b31 16px) bottom right,
    linear-gradient(145deg, #e7bd5d, #b97a28);
  background-size: 51% 51%;
  background-repeat: no-repeat;
  color: #38240d;
  text-align: center;
  box-shadow: inset 0 0 0 3px #f4db8a, 0 18px 55px #000c;
}

.kicker { color: #55702e; font-size: 13px; font-weight: 900; letter-spacing: 4px; }
h1, h2 { margin: 8px 0 10px; font-family: Georgia, "Microsoft YaHei", serif; }
h1 { font-size: clamp(36px, 7vw, 58px); letter-spacing: 2px; }
h2 { font-size: 38px; }
.stone-panel p { margin: 0 0 24px; color: #604016; }

.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 26px; }
.controls-grid > div { display: grid; grid-template-columns: 28px 1fr; align-items: center; text-align: left; padding: 12px; border: 2px solid #956b27; border-radius: 12px; background: #f1ce77aa; }
.controls-grid small { grid-column: 1 / 3; display: block; margin-top: 5px; color: #654416; }
.avatar { width: 20px; height: 20px; border-radius: 50% 50% 42% 42%; transform: rotate(45deg); box-shadow: 0 2px 4px #0007; }
.fire-dot { background: linear-gradient(135deg, #ffde3a, #f0380b); }
.water-dot { background: linear-gradient(135deg, #d9ffff, #16aee8); }

.primary-button {
  min-width: 190px;
  padding: 13px 28px;
  border: 3px solid #3d501e;
  border-radius: 15px;
  background: linear-gradient(#9bd449, #588e25);
  color: #21320f;
  font: 900 20px inherit;
  text-shadow: 0 1px #dfff9a;
  box-shadow: inset 0 0 0 2px #c7ed79, 0 5px 0 #334c18, 0 8px 15px #0007;
  cursor: pointer;
}
.primary-button:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px #c7ed79, 0 1px 0 #334c18; }

.result-card { width: min(430px, calc(100vw - 34px)); }
.gem-crown { width: 58px; height: 58px; margin: -68px auto 4px; display: grid; place-items: center; border: 7px solid #7f5b20; border-radius: 50%; background: #e6b34e; color: #4bea54; font-size: 32px; text-shadow: 0 0 13px #6dff64; }
.result-row { display: flex; justify-content: space-between; max-width: 260px; margin: 8px auto; padding-bottom: 6px; border-bottom: 1px dashed #8b6122; font-size: 18px; }
.rank { margin: 12px 0 18px; color: #4c9a2a; font: 900 74px Georgia, serif; line-height: .95; text-shadow: 0 3px #e0e97c, 0 6px #78551c; }

.toast {
  position: absolute;
  left: 50%;
  top: 80px;
  transform: translate(-50%, -14px);
  padding: 9px 18px;
  border-radius: 18px;
  background: #162014e8;
  color: #e7dba2;
  border: 1px solid #8e7a3b;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.touch-controls { display: none; position: absolute; inset: auto 0 max(16px, env(safe-area-inset-bottom)); justify-content: space-between; padding: 0 18px; pointer-events: none; }
.touch-set { display: flex; align-items: flex-end; gap: 8px; pointer-events: auto; }
.touch-set button { width: 54px; height: 54px; border: 2px solid #d7c87f88; border-radius: 50%; background: #182016b8; color: white; font-size: 21px; backdrop-filter: blur(4px); }
.water-set button { box-shadow: inset 0 0 18px #11b6e877; }
.fire-set button { box-shadow: inset 0 0 18px #f0491677; }

@media (pointer: coarse), (max-width: 900px) {
  .touch-controls { display: flex; }
  .topbar { padding: 0 12px; }
  .icon-button { width: 41px; height: 41px; font-size: 23px; }
  .timer { font-size: 20px; min-width: 110px; padding: 7px 12px; }
}

@media (max-height: 620px) {
  .stone-panel { transform: scale(.82); }
  .touch-set button { width: 46px; height: 46px; }
}