/* 攤位首頁。右下角 360x260 是大衛滑鼠視窗禁入區，內容一律不進入 */
:root {
  --green: #004d40;
  --orange: #ff8a00;
  --cream: #fffef5;
  --zone-w: 360px;
  --zone-h: 260px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  color: var(--green);
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}
body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) var(--zone-h);
  padding: 0 40px;
}
.top {
  text-align: center;
  padding: 2.2vh 0 1vh;
}
.top h1 {
  margin: 0;
  font-size: clamp(34px, 5.2vh, 60px);
  letter-spacing: .08em;
}
.top p {
  margin: .5vh 0 0;
  font-size: clamp(22px, 3.2vh, 36px);
  font-weight: 700;
  color: var(--orange);
}
.cards {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: stretch;
  padding: 1vh 0 2vh;
  min-height: 0;
}
.card {
  position: relative;
  flex: 1 1 0;
  max-width: 780px;
  min-width: 360px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2vh;
  padding: 28px 32px;
  text-align: center;
  text-decoration: none;
  color: var(--cream);
  background: var(--green);
  border: 8px solid var(--green);
  border-radius: 28px;
  transition: transform .15s, border-color .15s;
}
.card-rw { background: #fff; color: var(--green); }
.card:hover, .card:focus-visible, .card.dwelling {
  border-color: var(--orange);
  transform: scale(1.02);
  outline: none;
}
.card-title {
  font-size: clamp(40px, 7vh, 80px);
  font-weight: 800;
  line-height: 1.15;
}
.card-desc {
  font-size: clamp(22px, 3.4vh, 38px);
  line-height: 1.5;
  max-width: 90%;
}
.card-hint {
  font-size: clamp(18px, 2.4vh, 26px);
  color: var(--orange);
  font-weight: 700;
}
.ring {
  position: absolute;
  top: 16px;
  right: 16px;
  width: clamp(64px, 9vh, 96px);
  height: clamp(64px, 9vh, 96px);
  transform: rotate(-90deg);
  opacity: 0;
  transition: opacity .15s;
}
.card.dwelling .ring { opacity: 1; }
.ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: rgba(255, 138, 0, .25); }
.ring-fg {
  stroke: var(--orange);
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;
}
.foot {
  align-self: end;
  width: calc(100vw - 80px - var(--zone-w) - 24px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  font-size: 16px;
  color: var(--green);
  opacity: .8;
}