/* ポータル：放課後の町 */
:root {
  --chalk: #f7f5ee;
  --board: #2f5d46;
  --board-dark: #234836;
  --wood: #a8743f;
  --wood-dark: #7a522a;
  --font-hand: "Yomogi", "Zen Maru Gothic", cursive;
}

body { background-image: none; background: #f6ecd7; }

/* ---------- 黒板 ---------- */
.blackboard-wrap { padding: 24px 16px 0; }
.blackboard {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 36px 24px 48px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.05), transparent 50%),
    var(--board);
  border: 14px solid var(--wood);
  border-bottom-width: 22px;
  border-radius: 6px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 6px 0 var(--wood-dark);
  color: var(--chalk);
  font-family: var(--font-hand);
  text-align: center;
}
.chalk-corner {
  position: absolute;
  top: 10px; right: 16px;
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 0.95rem;
  opacity: 0.85;
  writing-mode: horizontal-tb;
}
.chalk-title {
  margin: 16px 0 4px;
  font-size: clamp(2rem, 7.5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 2px 2px 0 rgba(255, 255, 255, 0.08);
}
.chalk-sub { margin: 0; font-size: 1.1rem; }
.chalk-sub u { text-decoration-color: #f7a8b8; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.chalk-doodle { position: absolute; left: 20px; top: 14px; color: #f9e27a; opacity: 0.8; transform: rotate(-6deg); }
.chalk-tray {
  position: absolute;
  bottom: -22px; left: 0; right: 0;
  height: 22px;
  display: flex; align-items: center; gap: 10px;
  padding-left: 40px;
}
.chalk { width: 34px; height: 8px; border-radius: 3px; }
.chalk.white { background: #fff; }
.chalk.pink { background: #f7a8b8; width: 22px; }
.chalk.yellow { background: #f9e27a; width: 28px; }
.eraser {
  width: 54px; height: 14px; margin-left: auto; margin-right: 40px;
  background: linear-gradient(#333 0 45%, #c9b48a 45%);
  border-radius: 2px;
}

/* ---------- 時間割ナビ ---------- */
.timetable {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px;
  margin: 28px auto 8px;
  padding: 0 16px;
}
.timetable a {
  display: flex; align-items: center; gap: 6px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 4px 14px 4px 4px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(59, 42, 30, 0.25);
}
.timetable a:hover { background: var(--yellow); }
.timetable b {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--ink); color: #fff;
  border-radius: 6px;
}

/* ---------- エリア共通 ---------- */
.zone { position: relative; padding: 40px 16px 56px; overflow: hidden; scroll-margin-top: 8px; }
.zone-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; }
.zone-title {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 6px 18px;
  font-size: 1.6rem; font-weight: 900;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.zone-title small { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.zone-icon { width: 1.7rem; height: 1.7rem; align-self: center; }
.deco {
  position: absolute; right: 16px; bottom: 8px;
  display: flex; gap: 12px;
  font-size: 2rem;
  opacity: 0.85;
  pointer-events: none;
}
.deco .art { width: 2.6rem; height: 2.6rem; }
.deco > :nth-child(2) { transform: translateY(-10px) rotate(8deg); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* ---------- カード共通 ---------- */
.card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px 18px 16px;
  transition: transform 0.15s;
}
a.card:hover { transform: translateY(-4px) rotate(-1deg); }
a.card:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.card .icon { display: block; width: 72px; height: 72px; }
.card h3 { margin: 10px 0 4px; font-size: 1.3rem; }
.card p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.card .meta { margin-top: 10px; font-size: 0.8rem; font-weight: 700; }
.card.soon { filter: saturate(0.4); opacity: 0.75; }
.card.soon .icon { opacity: 0.6; }

/* はんこ */
.stamp {
  position: absolute;
  top: 12px; right: 12px;
  padding: 2px 8px;
  border: 2px solid #999;
  border-radius: 6px;
  color: #999;
  font-size: 0.75rem; font-weight: 900;
  transform: rotate(8deg);
}
.stamp.ok {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  padding: 0;
  top: -14px; right: -10px;
  border: 3px double var(--red);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--red);
  transform: rotate(-12deg);
}

/* ---------- 教室：ノートのカード ---------- */
.classroom {
  background:
    linear-gradient(to bottom, transparent calc(100% - 36px), #c79a63 calc(100% - 36px), #c79a63 calc(100% - 32px), #b5864f calc(100% - 32px)),
    #f3ead7;
}
.classroom .card {
  background:
    linear-gradient(90deg, transparent 30px, #f2a3a3 30px, #f2a3a3 32px, transparent 32px),
    repeating-linear-gradient(to bottom, #fff 0 27px, #cfe0f2 27px 28px);
  padding-left: 44px;
}

/* ---------- 校庭：砂とライン ---------- */
.schoolyard {
  background:
    radial-gradient(rgba(122, 85, 40, 0.18) 1px, transparent 1.5px) 0 0 / 14px 14px,
    #e6cf9f;
}
.schoolyard::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 86%; height: 78%;
  transform: translate(-50%, -50%);
  border: 6px dashed rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}
.schoolyard .card { border-top-width: 14px; border-top-color: var(--blue); }

/* ---------- 公園：芝生と木の看板 ---------- */
.park {
  background:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.07) 0 40px, transparent 40px 80px),
    linear-gradient(#a8d672, #86bf55);
}
.park .card {
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 22px),
    #d9a86a;
  border-color: var(--wood-dark);
}
.park .card p { color: #5a3d1f; }

/* ---------- お祭り：夜空と提灯 ---------- */
.festival {
  padding-top: 84px;
  background:
    radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px) 0 0 / 90px 70px,
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px) 0 0 / 130px 90px,
    linear-gradient(#1d2a55, #33407a 60%, #5a4a7a);
  color: #fff;
}
/* 提灯のひも */
.lanterns {
  position: absolute; left: 0; right: 0; top: 0;
  height: 70px;
  background:
    radial-gradient(ellipse 15px 19px at 40px 36px, #ff6b4a 0 95%, transparent 100%) 0 0 / 90px 70px repeat-x,
    radial-gradient(ellipse 15px 19px at 40px 36px, rgba(255, 210, 120, 0.55) 0 100%, transparent 100%) 0 0 / 90px 70px repeat-x;
  filter: drop-shadow(0 0 10px rgba(255, 170, 80, 0.9));
}
.lanterns::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.lanterns::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 14px; height: 50px;
  background:
    linear-gradient(#3b2a1e, #3b2a1e) 36px 0 / 8px 5px repeat-x,
    linear-gradient(#3b2a1e, #3b2a1e) 36px 41px / 8px 4px repeat-x;
  background-size: 90px 5px, 90px 4px;
  background-repeat: repeat-x;
}
.festival .card {
  background: #fffdf5;
  border-top: 12px solid #e2483b;
}
.festival .card .icon { margin-top: 22px; }
.festival .zone-title { background: #fff3e6; color: var(--ink); }

/* ---------- 駄菓子屋：のれんと値札 ---------- */
.dagashiya {
  padding-top: 72px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 60px),
    #e9c891;
}
.awning {
  position: absolute; top: 0; left: 0; right: 0;
  height: 44px;
  background: repeating-linear-gradient(90deg, var(--red) 0 40px, #fff 40px 80px);
  border-bottom: 3px solid var(--ink);
}
.awning::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -18px;
  height: 18px;
  background:
    radial-gradient(circle at 20px 0, var(--red) 19px, transparent 20px) 0 0 / 80px 18px repeat-x,
    radial-gradient(circle at 60px 0, #fff 19px, transparent 20px) 0 0 / 80px 18px repeat-x;
}
.dagashiya .card { border-style: solid; background: #fffdf5; }
.price {
  position: absolute;
  left: -8px; top: 18px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 0 10px 0 14px;
  font-weight: 900; font-size: 0.85rem;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
.dagashiya .card .icon { margin-top: 14px; }

/* ---------- 下校チャイム ---------- */
.chime {
  background: #f39c4a;
  background: linear-gradient(#f6b36b, #e9844a);
  color: #fff;
  text-align: center;
  padding: 28px 16px 36px;
  border-top: 3px solid var(--ink);
}
.chime-sound { font-family: var(--font-hand); font-size: 1.3rem; }
.chime p { margin: 4px 0 0; font-size: 0.85rem; }

@media (max-width: 480px) {
  .blackboard { padding: 48px 12px 40px; border-width: 10px; border-bottom-width: 18px; }
  .chalk-corner { font-size: 0.8rem; }
  .zone-title { font-size: 1.3rem; }
  .deco .art { width: 2rem; height: 2rem; }
}