/* えいごのあそび場 — ポータル共通スタイル（ゲームと同じ世界観トークン） */
:root{
  --sky:#D8EEF9;
  --sky-deep:#BFE2F4;
  --paper:#FFFDF6;
  --ink:#1E3A5F;
  --ink-soft:#5A7391;
  --sun:#FF8A3D;
  --leaf:#3BB273;
  --star:#FFC53D;
  --hill:#BFE3C6;
  --cloud-op:.75;
  --sun-btn:#F26A00;   --sun-btn-deep:#C4560A;
  --leaf-btn:#2D9660;  --leaf-btn-deep:#1F7A4B;
  --blue-btn:#3E87C2;  --blue-btn-deep:#2D6B9E;
  --shadow-c:rgba(30,58,95,.14);
  --card-shadow:0 8px 0 var(--shadow-c);
  --card-shadow-dn:0 2px 0 var(--shadow-c);
  --chip:#FFFFFF;
  --badge-bg:var(--sky-deep);
  --r-s:14px; --r-m:20px; --r-l:28px;
}
@media (prefers-color-scheme: dark){
  :root{
    --sky:#101F33; --sky-deep:#0B1626; --paper:#1C2F49; --ink:#EAF4FF; --ink-soft:#9FB6CE;
    --sun:#FF9A55; --leaf:#4CC386; --star:#FFD25E;
    --hill:#173248; --cloud-op:.18;
    --shadow-c:rgba(0,0,0,.35);
    --chip:#24395A; --badge-bg:#2B4368;
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:'Hiragino Maru Gothic ProN','BIZ UDGothic','Yu Gothic UI',system-ui,sans-serif;
  background:var(--sky);
  color:var(--ink);
  min-height:100dvh;
  line-height:1.8;
}
body::before{
  content:""; position:fixed; top:6%; left:-38px; width:110px; height:36px; border-radius:99px;
  background:var(--paper); opacity:var(--cloud-op); z-index:-1;
  box-shadow:88vw 12vh 0 -6px var(--paper), 20vw 74vh 0 -12px var(--paper);
}
body::after{
  content:""; position:fixed; left:-12%; right:-12%; bottom:-56px; height:150px;
  background:var(--hill); border-radius:50% 50% 0 0 / 100% 100% 0 0; z-index:-1;
}
.wrap{max-width:720px; margin:0 auto; padding:24px 20px calc(48px + env(safe-area-inset-bottom));}
a{color:inherit;}
a:focus-visible, button:focus-visible{outline:3px solid var(--sun); outline-offset:4px;}

/* header / hero */
.site-head{display:flex; align-items:center; gap:10px; margin-bottom:28px; font-size:14px;}
.site-head .logo{
  font-family:ui-rounded,'Comic Sans MS','Chalkboard SE','Segoe Print',sans-serif;
  font-weight:800; font-size:18px; letter-spacing:.3px; text-decoration:none;
}
.site-head .logo b{color:var(--sun);}
.crumb{color:var(--ink-soft); font-size:13px; text-decoration:none;}
.crumb:hover{text-decoration:underline;}
.hero{text-align:center; margin:16px 0 36px;}
.hero .eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--ink-soft);
  background:var(--chip); border-radius:99px; padding:6px 16px; box-shadow:var(--card-shadow); margin-bottom:16px;
}
.hero h1{
  font-size:clamp(30px,7vw,44px); font-weight:800; line-height:1.35; margin:0 0 12px; text-wrap:balance;
  font-family:ui-rounded,'Comic Sans MS','Chalkboard SE','Hiragino Maru Gothic ProN',sans-serif;
}
.hero .lead{color:var(--ink-soft); font-size:15px; margin:0 auto 24px; max-width:34em; text-wrap:balance;}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--leaf-btn); color:#fff; text-decoration:none;
  border-radius:var(--r-m); padding:16px 28px; font-weight:800; font-size:17px;
  box-shadow:0 8px 0 var(--leaf-btn-deep);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.cta:active{transform:translateY(6px); box-shadow:0 2px 0 var(--leaf-btn-deep); transition-duration:.06s;}

/* sections */
section{margin:40px 0;}
h2{
  font-size:20px; font-weight:800; margin:0 0 16px; display:flex; align-items:center; gap:8px;
}
h2 .em{font-size:24px;}
.cards{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:560px){ .cards{grid-template-columns:1fr 1fr;} }
.card{
  background:var(--paper); border-radius:var(--r-l); padding:22px;
  box-shadow:var(--card-shadow); text-decoration:none; display:flex; flex-direction:column; gap:8px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
a.card:hover{transform:translateY(-3px); box-shadow:0 11px 0 var(--shadow-c);}
a.card:active{transform:translateY(5px); box-shadow:var(--card-shadow-dn); transition-duration:.06s;}
.card .icon{
  width:56px; height:56px; border-radius:var(--r-s); background:var(--badge-bg);
  display:grid; place-items:center; font-size:30px;
}
.card h3{margin:6px 0 0; font-size:18px; font-weight:800;}
.card p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.7;}
.card .go{
  margin-top:auto; padding-top:10px; font-size:14px; font-weight:800; color:var(--leaf-btn);
  display:flex; align-items:center; gap:6px;
}
@media (prefers-color-scheme: dark){ .card .go{color:var(--leaf);} }
.card.soon{opacity:.75;}
.card.soon .icon{background:var(--sky);}
.tag{
  align-self:flex-start; font-size:11px; font-weight:800; border-radius:99px; padding:3px 10px;
  background:var(--star); color:#1E3A5F;
}
.tag.gray{background:var(--sky-deep); color:var(--ink-soft);}

/* note / footer */
.note{
  background:var(--chip); border-radius:var(--r-m); padding:16px 20px; box-shadow:var(--card-shadow);
  font-size:13px; color:var(--ink-soft);
}
footer{
  margin-top:56px; text-align:center; font-size:12px; color:var(--ink-soft);
}
footer .en{
  font-family:ui-rounded,'Comic Sans MS','Chalkboard SE',sans-serif; font-weight:800;
}
.empty{
  text-align:center; padding:48px 20px; background:var(--paper); border-radius:var(--r-l);
  box-shadow:var(--card-shadow);
}
.empty .big{font-size:44px; margin-bottom:8px;}
.empty p{color:var(--ink-soft); font-size:14px; margin:0;}