/* 木叶观光 · 子应用样式（沿用全站设计令牌；类名与 script.js 保持一致） */
:root { --grid-size: min(88vw, 460px); }
.background-gradient { display: none; }
.glass-container { width: 100%; }
.sightseeing-container { width: 100%; }
.main-content-wrapper {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px 40px; align-items: start;
  padding: 32px; border-radius: 22px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(10, 22, 33, .06);
}
.js .main-content-wrapper { animation: calc-rise .9s .15s var(--ease-out) both; }
@keyframes calc-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.date-selector { position: relative; width: 100%; grid-column: 1; grid-row: 1; }
.lottery-box { grid-column: 1; grid-row: 2; }
.game-info { grid-column: 2; grid-row: 1 / span 2; }
.date-icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--accent-ink); pointer-events: none; }
.date-input {
  width: 100%; min-height: 54px; padding: 12px 18px 12px 48px;
  border: 1px solid transparent; border-radius: 12px; background: var(--paper);
  color: var(--ink); font-size: 16px; font-family: var(--font-body); cursor: pointer;
  transition: border-color .2s, box-shadow .25s, background .2s;
}
.date-input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(242, 102, 43, .14); }
.lottery-box { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.grid-container {
  width: 100%; max-width: var(--grid-size); aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px;
  border-radius: 20px; background: var(--navy);
}
.grid-item {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 12px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.grid-item img { width: 100%; height: 100%; object-fit: cover; }
.grid-item.running { box-shadow: 0 0 0 2px var(--accent) inset; }
.grid-item.active { z-index: 2; transform: scale(1.05); box-shadow: 0 0 0 3px var(--accent-soft) inset, 0 0 24px rgba(242, 102, 43, .6); }
.start-btn {
  width: min(260px, 100%); min-height: 56px; border: 0; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 17px; font-weight: 600; font-family: var(--font-body);
  transition: background .25s, transform .3s var(--ease-out), box-shadow .3s;
}
.start-btn:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(242, 102, 43, .3); }
.game-info {
  padding: 30px; border-radius: 22px; background: var(--navy); color: var(--text-on-dark);
  position: sticky; top: calc(var(--header-h) + 24px);
}
.game-info h3 { margin: 0 0 18px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.game-info p { margin: 0; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); color: var(--muted-on-dark); font-size: 15px; line-height: 1.7; }
.result-modal {
  position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(5, 12, 19, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.result-content {
  position: relative; overflow: hidden;
  width: min(460px, 92vw); padding: 0 0 32px; border-radius: 20px; text-align: left;
  background: #fff; color: var(--ink); box-shadow: 0 50px 100px rgba(0, 0, 0, .35);
  animation: modal-pop .5s var(--ease-out) both;
}
.result-content h2 {
  position: relative; overflow: hidden; margin: 0;
  padding: 58px 36px 30px; color: #fff;
  background: linear-gradient(120deg, #ff7444 0%, #f0532a 55%, #f37a3a 100%);
  font-size: 30px; font-weight: 700; letter-spacing: -.02em;
}
.result-content h2::before {
  content: "RESULT / 木叶观光"; position: absolute; left: 36px; top: 28px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; color: rgba(255, 255, 255, .78);
}
.result-content h2::after {
  content: ""; position: absolute; right: -50px; bottom: -110px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 196, 140, .55), rgba(255, 170, 110, .25));
}
#resultText { margin: 26px 36px 0; padding-bottom: 22px; border-bottom: 1px solid #eceef1; font-size: 17px; line-height: 1.75; color: var(--ink); word-wrap: break-word; }
.close-btn {
  display: block; width: calc(100% - 72px); margin: 26px 36px 0;
  min-height: 56px; padding: 12px 24px; border: 0; border-radius: 12px;
  background: linear-gradient(100deg, #ff7444, #ef5a2f); color: #fff;
  font-size: 17px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 16px 34px rgba(239, 90, 47, .28);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.close-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(239, 90, 47, .34); }
@media (max-width: 900px) {
  .main-content-wrapper { grid-template-columns: 1fr; }
  .date-selector, .lottery-box, .game-info { grid-column: 1; grid-row: auto; }
  .game-info { position: static; }
}
@media (max-width: 640px) {
  .main-content-wrapper { padding: 18px; }
  .game-info { padding: 22px; }
}