@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
  --green-dark: #1a5c38;
  --green-mid: #2d8a56;
  --green-light: #3AB67D;
  --green-pale: #e8f5ee;
  --bg: #f0f4f2;
  --white: #ffffff;
  --text: #1a1a1a;
  --text-sub: #666;
  --text-light: #999;
  --danger: #e74c3c;
  --team-a: #2980b9;
  --team-b: #e67e22;
  --gold: #f0c040;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html { font-size: 16px; }
body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
}

.page { display: none; min-height: 100dvh; }
.page.active { display: flex; flex-direction: column; }
.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  justify-content: center;
  align-items: center;
  padding: 5vw;
}
.modal-overlay.show { display: flex; }
.modal-content {
  background: var(--white);
  border-radius: var(--radius);
  padding: 8vw 6vw;
  text-align: center;
  max-width: 85vw;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.modal-content h2 { font-size: 5vw; font-weight: 900; margin-bottom: 2vw; }
.modal-content p { font-size: 3.5vw; color: var(--text-sub); margin-bottom: 5vw; }
.modal-btn {
  display: block;
  width: 100%;
  padding: 4vw;
  border: none;
  border-radius: 50px;
  background: var(--green-light);
  color: var(--white);
  font-size: 4.2vw;
  font-weight: 700;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  cursor: pointer;
}