/* 単語タイピングゲームの共通のスタイル（どのゲームでも同じ見た目） */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --ink: #14161a; --sub: #5b6470; --mute: #9aa3ad; --line: #ece9f2; --paper: #fbfaf8;
  --accent: #5b4cf0; --stamp: #e0563f; --ok: #1f9d61;
  --head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}
html, body { height: 100%; }
body { margin: 0; font-family: "Noto Sans JP", -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif; color: var(--ink); background: #f6f4fb; -webkit-font-smoothing: antialiased; }
/* 日本語を文節で折り返す（「説くこ／と」のように言葉の途中で切らない）。auto-phrase が使えないブラウザでは、句読点のあとで折り返す */
body { word-break: keep-all; overflow-wrap: anywhere; word-break: auto-phrase; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.top { display: flex; align-items: center; gap: 10px; max-width: 1180px; margin: 0 auto; padding: 18px 24px; }
.brand { display: flex; white-space: nowrap; align-items: center; gap: 10px; font-family: var(--head); font-weight: 900; font-size: 16px; text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.top .sp { flex: 1; }
.top .link { white-space: nowrap; font-size: 13px; color: var(--sub); text-decoration: none; padding: 8px 14px; border-radius: 999px; }
.top .link:hover { background: rgba(20,22,26,.05); color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.dark { background: var(--ink); color: #fff; }
.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 48px; }
[hidden] { display: none !important; }

/* スタート */
.start { text-align: center; padding: 28px 0 10px; }
.kick { font: 800 12px Inter, sans-serif; letter-spacing: .16em; color: var(--accent); }
.start h1 { font-family: var(--head); font-weight: 900; font-size: clamp(30px, 4vw, 46px); line-height: 1.28; margin: 12px 0 30px; letter-spacing: -.01em; }
.start h1 em { font-style: normal; background: linear-gradient(90deg, #5b4cf0, #c04fd8 55%, #f0786a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.courses { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.course { width: 220px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; transition: transform .15s, box-shadow .15s; }
.course:hover { transform: translateY(-2px); }
.course[aria-pressed="true"] { border: 2px solid var(--ink); transform: translateY(-6px); box-shadow: 0 18px 36px rgba(60,50,140,.14); }
.course .tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: #f1f0f4; margin-bottom: 8px; }
.course[aria-pressed="true"] .tag { background: var(--ink); color: #fff; }
.course b { display: block; font-family: var(--head); font-size: 19px; }
.course .sec { font: 800 28px Inter, sans-serif; margin: 8px 0 2px; }
.course .sec small { font-size: 13px; color: var(--sub); }
.course .ex { font-size: 12px; color: var(--sub); line-height: 1.7; }
.course .best { margin-top: 8px; font-size: 12px; color: var(--mute); }
.go { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.go .btn { padding: 16px 40px; font-size: 17px; }
.note { font-size: 13px; color: var(--sub); }
.note kbd { font: 700 12px Inter, sans-serif; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: #fff; }
/* 意味クイズ・単語帳：スタートの下に、説明つきの大きいカードで出す */
.modes { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.mode { width: 300px; display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.mode:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(60,50,140,.12); }
.mode .ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font: 900 21px var(--head); }
.mode .ic.quiz { background: linear-gradient(135deg, #5b4cf0, #c04fd8); }
.mode .ic.book { background: linear-gradient(135deg, #f0786a, #f5a547); }
.mode .tx { flex: 1; min-width: 0; }
.mode b { display: block; font-family: var(--head); font-weight: 900; font-size: 18px; }
.mode small { display: block; font-size: 12px; color: var(--sub); margin-top: 3px; line-height: 1.5; }
.mode .ar { color: var(--mute); font-size: 18px; }
.note.warn { color: var(--stamp); }
.weak-link { font-size: 13px; color: var(--accent); background: none; border: none; text-decoration: underline; }

/* プレイ */
.stage { position: relative; height: 590px; border-radius: 22px; overflow: hidden; background: linear-gradient(#f6f4fb, #eceaf3); box-shadow: 0 26px 60px rgba(60,50,140,.12), 0 0 0 1px rgba(20,22,26,.05); user-select: none; }
.stage .wall { position: absolute; inset: 0 0 280px 0; background: repeating-linear-gradient(90deg, #f6f4fb 0 138px, #efecf7 138px 140px); }
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px; padding: 16px 24px; font-size: 13px; color: var(--sub); z-index: 5; }
.hud b { font: 800 22px Inter, sans-serif; color: var(--ink); margin-left: 4px; }
.hud .cname { font-family: var(--head); font-weight: 900; font-size: 15px; color: var(--ink); }
.hud .sp { flex: 1; }
.timer { width: 220px; height: 8px; border-radius: 99px; background: #e2def0; overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5b4cf0, #c04fd8); transform-origin: left; }
.combo { font: 800 13px Inter, sans-serif; color: var(--stamp); min-width: 70px; }
.belt { position: absolute; left: 0; right: 0; bottom: 216px; height: 56px; background: repeating-linear-gradient(90deg, #3b3f48 0 24px, #2f333b 24px 48px); border-top: 7px solid #565b66; border-bottom: 7px solid #565b66; background-size: 48px 100%; }
.es { position: absolute; left: 0; bottom: 270px; width: 150px; height: 168px; background: #fff; border-radius: 7px; box-shadow: 0 12px 26px rgba(20,22,26,.18); padding: 12px 14px; will-change: transform; }
.es .t { display: flex; justify-content: space-between; font-size: 9px; color: var(--mute); border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.es .w { font-family: var(--head); font-weight: 900; font-size: 34px; text-align: center; margin-top: 16px; letter-spacing: .04em; white-space: nowrap; }
.es .w.long { font-size: 27px; }
.es .m { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--sub); text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.es .m b { color: var(--ink); margin-right: 6px; }
.es.on { outline: 3px solid var(--accent); }
.es.done { opacity: .55; }
.es.miss { opacity: .35; }
.stamp { position: absolute; left: 42px; top: 52px; width: 66px; height: 66px; border-radius: 50%; border: 3px solid var(--stamp); color: var(--stamp); font-weight: 900; font-size: 27px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.75); transform: rotate(-14deg) scale(1); animation: stamp .18s ease-out; }
@keyframes stamp { from { transform: rotate(-14deg) scale(1.8); opacity: 0; } }
.focus { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 190px; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(20,22,26,.14); z-index: 6; overflow: hidden; }
.focus > div { height: 100%; }
.focus.shake { animation: shake .2s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.fs { padding: 34px 28px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-width: 0; }
.sent { font-family: var(--head); font-weight: 900; font-size: 25px; line-height: 1.35; letter-spacing: .02em; }
.sent { color: var(--mute); }
.sent .tp { color: var(--ink); background: #f1efff; border-radius: 8px; padding: 0 6px; }
.sent mark { background: linear-gradient(transparent 55%, #ffe36e 55%); color: var(--ink); padding: 0 1px; }
.focus .y { font-size: 19px; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.focus .r { font: 700 30px Inter, sans-serif; letter-spacing: .04em; color: var(--ink); word-break: break-all; line-height: 1.2; }
.focus .y .dn, .focus .r .dn { color: #cfd3da; }
.focus .r .cu { color: var(--accent); border-bottom: 3px solid var(--accent); }
/* 意味の吹き出し（打つ言い回しの真上） */
.gl { position: relative; display: inline-block; }
.gloss { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); white-space: nowrap; font: 700 14px "Noto Sans JP", sans-serif; color: var(--accent); background: #f1efff; border-radius: 10px; padding: 3px 12px; letter-spacing: 0; }
.gloss::after { content: ""; position: absolute; left: calc(50% - 6px - var(--sh, 0px)); top: 100%; border: 6px solid transparent; border-top-color: #f1efff; }
.paused { font: 700 12px "Noto Sans JP", sans-serif; color: var(--accent); background: #f1efff; border-radius: 99px; padding: 3px 10px; }
/* ときどき出す意味の 2 択 */
.qz { padding: 20px 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.qz .q { font-family: var(--head); font-weight: 900; font-size: 22px; }
.qz .q b { font-size: 30px; margin-right: 6px; }
.qz .q small { font: 700 12px Inter, "Noto Sans JP", sans-serif; color: var(--accent); background: #f1efff; border-radius: 99px; padding: 3px 10px; margin-left: 10px; vertical-align: middle; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two .op { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; font-size: 17px; font-weight: 700; line-height: 1.5; background: #fff; color: var(--ink); text-align: left; }
.two .op.k1 { flex-direction: row-reverse; text-align: right; }
.two .op span { flex: 1; text-wrap: balance; }
.two .op.right { border: 2px solid var(--ok); background: #effaf4; }
.two .op.wrong { border: 2px solid var(--stamp); background: #fff3f1; color: var(--sub); }
/* キーボードの F・J キーそのものの見た目（指の目印の突起つき） */
.two kbd { position: relative; font: 800 20px Inter, sans-serif; width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 6px; border: 1px solid #d5d8de; border-radius: 10px; background: linear-gradient(#fff, #f3f4f7); box-shadow: 0 4px 0 #c9cdd5, 0 6px 10px rgba(20,22,26,.12); color: var(--ink); transition: transform .06s, box-shadow .06s; }
.two kbd::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #a9aeb8; }
.two kbd.press { animation: keypress .16s; }
@keyframes keypress { 40% { transform: translateY(4px); box-shadow: 0 0 0 #c9cdd5, 0 1px 2px rgba(20,22,26,.12); } }
.ime { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 22px; font-weight: 700; z-index: 9; }
.countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 96px Inter, sans-serif; color: var(--ink); background: rgba(246,244,251,.7); z-index: 8; }
.quit { margin-top: 12px; text-align: center; font-size: 12px; color: var(--mute); }
.quit-sp { background: none; border: 0; padding: 10px 18px; font-size: 13px; color: var(--mute); text-decoration: underline; }

/* スマホ：4 択 */
.choice { max-width: 460px; margin: 0 auto; }
.choice .hud { position: static; padding: 0 0 12px; }
.choice .card { background: #fff; border-radius: 24px; padding: 28px 18px 24px; text-align: center; box-shadow: 0 18px 40px rgba(60,50,140,.12); }
.choice .card .w { font-family: var(--head); font-weight: 900; font-size: 54px; line-height: 1.15; }
.choice .card .yo { color: var(--mute); margin-top: 6px; min-height: 1.6em; }
.choice.pc { max-width: 860px; }
.choice.pc .card { padding: 40px 18px 34px; }
.choice.pc .card .w { font-size: 64px; }
.choice.pc .opts { margin-top: 22px; }
.choice.pc .two .op { padding: 22px 22px; font-size: 18px; min-height: 104px; }
/* 答えたあとに出す例文 */
.exs mark { background: linear-gradient(transparent 55%, #ffe36e 55%); color: var(--ink); font-weight: 700; padding: 0 1px; }
.exs b { font-size: 12px; color: var(--accent); margin-right: 8px; letter-spacing: .04em; }
.choice .card .exs { margin: 14px auto 0; max-width: 560px; font-size: 16px; line-height: 1.7; color: var(--sub); background: #f7f6fb; border-radius: 12px; padding: 10px 16px; }
.qz .q .exs { font: 700 20px var(--head); color: var(--sub); }
.qz .q .exs b { font: 700 13px "Noto Sans JP", sans-serif; margin-right: 10px; }
.choice .card .q { margin-top: 10px; font-size: 13px; color: var(--sub); }
.opts { display: grid; gap: 10px; margin-top: 16px; }
.opt { background: #fff; border-radius: 16px; padding: 14px 16px; font-size: 14px; border: 1px solid var(--line); text-align: left; line-height: 1.6; color: var(--ink);  text-wrap: balance; }
.opt.right { border: 2px solid var(--ok); background: #effaf4; }
.opt.wrong { border: 2px solid var(--stamp); background: #fff3f1; color: var(--sub); }

/* 結果 */
.res { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.score { background: #fff; border-radius: 22px; padding: 22px; text-align: center; box-shadow: 0 16px 40px rgba(60,50,140,.10); }
/* スコアの列は、単語帳をスクロールしてもついてくる。ただし下に広告があるときは、ついてこない（広告が画面の上に貼りつかないように） */
.side { position: sticky; top: 16px; }
.side:has(.ad) { position: static; }
.score .rank { display: inline-block; font-family: var(--head); font-weight: 900; font-size: 13px; background: var(--ink); color: #fff; border-radius: 999px; padding: 4px 14px; }
.score .pt { font: 800 54px Inter, sans-serif; line-height: 1; margin: 14px 0 4px; }
.score .pt small { font-size: 16px; color: var(--sub); }
.score .best { font-size: 12px; color: var(--accent); min-height: 18px; }
.score .st { display: flex; justify-content: center; gap: 16px; font-size: 11px; color: var(--sub); margin: 8px 0 16px; }
.score .st b { display: block; font: 800 17px Inter, sans-serif; color: var(--ink); }
.score .btn { width: 100%; padding: 12px; font-size: 14px; margin-top: 8px; }
.book { background: #fff; border-radius: 22px; padding: 18px 22px; box-shadow: 0 16px 40px rgba(60,50,140,.10); }
.book .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.book h2 { margin: 0; font-family: var(--head); font-size: 18px; }
.tabs { margin-left: auto; display: flex; gap: 6px; }
.tabs button { padding: 5px 12px; border-radius: 999px; background: #f1f0f4; color: var(--sub); border: none; font-size: 12px; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.wrow { display: grid; grid-template-columns: 22px 76px 112px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wrow:last-child { border: none; }
.mk { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; }
.mk.o { background: #e7f6ee; color: var(--ok); } .mk.x { background: #fde9e6; color: var(--stamp); } .mk.s { background: #f1f0f4; color: var(--mute); }
.wrow b { font-family: var(--head); font-size: 19px; }
.wrow .y { color: var(--mute); }
.wrow .ex { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.wrow.miss b { color: var(--stamp); }
/* 結果の単語帳から外した言葉（単語帳の「出題しない」） */
.wrow.gone b, .wrow.gone > span:not(.mk) { color: var(--mute); }
.wrow.gone b { text-decoration: line-through; text-decoration-color: rgba(154,163,173,.6); }
.wrow.gone .mk { opacity: .4; }
.hide { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: 1px solid var(--line); background: #fff; color: var(--sub); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }
.hide:hover { color: var(--ink); border-color: #d6d2e0; }
.hide svg { width: 14px; height: 14px; }
.hide.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.book .hd .tabs { margin-left: 10px; }
.bulk { margin-left: auto; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.bulk:hover { border-color: #d6d2e0; }
.bulk .o { width: 16px; height: 16px; border-radius: 50%; background: #e7f6ee; color: var(--ok); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.bookfoot { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--sub); }
.bookfoot button { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 700; font-size: inherit; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 18px; background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 14px 12px 22px; font-size: 14px; box-shadow: 0 18px 40px rgba(20,22,26,.3); }
.toast button { white-space: nowrap; flex: none; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; }
.review { display: flex; align-items: center; gap: 14px; margin-top: 12px; background: #fff7e6; border-radius: 14px; padding: 12px 16px; font-size: 13px; }
.review .btn { margin-left: auto; padding: 9px 18px; }
.cta { margin-bottom: 16px; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 14px 18px; border: 1px solid var(--line); font-size: 13px; }
.cta img { width: 32px; height: 32px; }
.cta b { font-family: var(--head); }
.cta span { color: var(--sub); }
.cta .btn { margin-left: auto; padding: 10px 18px; font-size: 13px; }
footer { text-align: center; font-size: 12px; color: var(--mute); padding: 20px; }

/* 広告（スタート・結果・一覧の下と、パソコンのプレイ中のステージの下。スマホの 4 択の画面には出さない） */
/* 広告の大きさは読み込んだときの幅で決まる。あとで画面が狭くなったら、広告を切らずに（隠すのは規約違反）枠の中で横にずらせるようにする */
.ad { max-width: 728px; margin: 36px auto 0; text-align: center; overflow-x: auto; }
/* プレイ中の小さい横長の枠。ステージから離して置き、大きさは読み込んだときの画面の幅で決める */
.ad-small { margin-top: 20px; }
.ad-small ins { width: 728px; height: 90px; }
@media (max-width: 800px) { .ad-small ins { width: 468px; height: 60px; } }
/* 結果画面のスコアの下の縦長の枠（パソコンだけ。スマホは結果のいちばん下の枠だけにする） */
.ad-side { margin-top: 16px; }
.ad-side ins { width: 280px; height: 560px; }
.ad-label { display: block; font-size: 11px; color: var(--mute); margin-bottom: 6px; }
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }

/* 単語帳 */
.wb { max-width: 980px; margin: 0 auto; padding-top: 8px; }
.wbh { display: flex; align-items: center; gap: 14px; }
.wbh .btn { padding: 8px 16px; font-size: 13px; }
.wbh h2 { font-family: var(--head); font-weight: 900; font-size: 26px; margin: 0; }
.wbh .sp { flex: 1; }
.wbh .cnt { font-size: 13px; color: var(--sub); }
.wb .tabs { display: flex; gap: 6px; margin: 18px 0 6px; }
.wb .tabs button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 14px; font-size: 13px; color: var(--sub); }
.wb .tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.wbg { background: #fff; border-radius: 20px; padding: 6px 22px 10px; margin-top: 14px; box-shadow: 0 10px 30px rgba(60,50,140,.06); }
.wbgh { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 6px; }
.wbgh h3 { font-family: var(--head); font-weight: 900; font-size: 17px; margin: 0; }
.wbgh h3 small { font: 500 12px "Noto Sans JP", sans-serif; color: var(--mute); margin-left: 8px; }
.wball { background: none; border: 0; font-size: 12px; color: var(--accent); }
.wbr { display: grid; grid-template-columns: 40px 96px 120px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.wbr input { position: absolute; opacity: 0; pointer-events: none; }
.wbr .sw { width: 34px; height: 20px; border-radius: 99px; background: #d9dce2; position: relative; transition: background .15s; }
.wbr .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.wbr input:checked + .sw { background: var(--accent); }
.wbr input:checked + .sw::after { transform: translateX(14px); }
.wbr input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.wbr b { font-family: var(--head); font-weight: 900; font-size: 18px; }
.wbr .y { font-size: 12px; color: var(--mute); }
.wbr .mn { font-size: 14px; line-height: 1.6; }
.wbr .ex { display: block; font-size: 12px; color: var(--mute); }
.wbr .ex mark { background: none; color: var(--sub); font-weight: 700; }
.wbr.off b, .wbr.off .mn { color: var(--mute); }

@media (max-width: 820px) {
  .res { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .ad-side { display: none; }
  .wrow { grid-template-columns: 22px 64px minmax(0, 1fr) auto; }
  .hide .lb { display: none; }
  .hide { padding: 7px 9px; }
  .book .hd { flex-wrap: wrap; }
  .bulk { margin-left: 0; width: 100%; justify-content: center; padding: 9px 14px; font-size: 13px; }
  .toast { left: 16px; right: 16px; transform: none; border-radius: 16px; font-size: 13px; }
  .wrow .y { display: none; }
  .cta { flex-wrap: wrap; }
  .cta .btn { margin-left: 0; width: 100%; }
  .course { width: 100%; }
  .mode { width: 100%; }
  .wbr { grid-template-columns: 40px 72px minmax(0, 1fr); }
  .wbr .y { display: none; }
}
@media (max-width: 480px) {
  .top { padding: 14px 16px; gap: 4px; }
  .top .link { padding: 8px 8px; }
  .top .link.ext { display: none; }
}