/* 半導体用語タイピングのテーマ：クリーンルームと回路。濃紺の地にシアンと緑、カードは IC チップの形 */
.theme-handotai {
  --ink: #e6f1ff; --sub: #aec0d6; --mute: #8fa3bd; --line: rgba(120, 200, 255, .16); --paper: #0b1424;
  --accent: #22d3ee; --stamp: #34d399; --ok: #34d399;
  --panel: rgba(17, 28, 48, .82); --panel-2: #13213a;
  --chip-ink: #e6f1ff;
  --il-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2322d3ee' stroke-width='2'%3E%3Crect x='16' y='16' width='32' height='32' rx='3'/%3E%3Crect x='24' y='24' width='16' height='16' rx='1' stroke='%2334d399'/%3E%3Cpath d='M22 16V8M32 16V8M42 16V8M22 56v-8M32 56v-8M42 56v-8M16 22H8M16 32H8M16 42H8M56 22h-8M56 32h-8M56 42h-8'/%3E%3C/svg%3E");
  --il-wafer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2322d3ee' stroke-width='2'%3E%3Cpath d='M32 6a26 26 0 1 0 4 .3' /%3E%3Cpath d='M36 6.3l-4 4-4-4.2'/%3E%3Cg stroke='%2334d399' stroke-width='1.4'%3E%3Cpath d='M14 24h36M10 32h44M14 40h36M24 14v36M32 10v44M40 14v36'/%3E%3C/g%3E%3C/svg%3E");
  --il-stack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M32 10 54 21 32 32 10 21Z' stroke='%2334d399'/%3E%3Cpath d='M10 30l22 11 22-11M10 39l22 11 22-11'/%3E%3Cpath d='M32 32v9M32 41v9' stroke-dasharray='2 3'/%3E%3C/svg%3E");
  background: #070e1b;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(34, 211, 238, .12), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(52, 211, 153, .08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%2322d3ee' stroke-opacity='.07' stroke-width='1.5'%3E%3Cpath d='M0 40h50l20 20h40l10-10h40M40 160v-40l20-20v-30M120 0v30l-20 20M0 120h30l15 15h60l20-20h35'/%3E%3Cg fill='%2322d3ee' fill-opacity='.12' stroke='none'%3E%3Ccircle cx='50' cy='40' r='3'/%3E%3Ccircle cx='110' cy='60' r='3'/%3E%3Ccircle cx='60' cy='100' r='3'/%3E%3Ccircle cx='105' cy='135' r='3'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--ink);
}
.theme-handotai .brand { color: var(--ink); }
.theme-handotai .top .link:hover { background: rgba(255, 255, 255, .06); }
.theme-handotai .kick { color: var(--accent); }
.theme-handotai .start h1 em { background: linear-gradient(90deg, #22d3ee, #34d399 55%, #a3e635); -webkit-background-clip: text; background-clip: text; }

/* パネル類（白い面を暗いガラスに） */
.theme-handotai :is(.course, .mode, .about, .score, .book, .cta, .wbg, .review, .choice .card, .opt, .two .op, .focus, .gloss, .paused, .end) {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.theme-handotai .course[aria-pressed="true"] { border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(34, 211, 238, .12), 0 18px 40px rgba(0, 0, 0, .4); }
.theme-handotai .course .tag, .theme-handotai .tabs button, .theme-handotai .wb .tabs button { background: rgba(255, 255, 255, .06); color: var(--sub); border-color: var(--line); }
.theme-handotai .course[aria-pressed="true"] .tag { background: var(--accent); color: #04121c; }
.theme-handotai .tabs button[aria-pressed="true"], .theme-handotai .wb .tabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #04121c; }
.theme-handotai .btn.dark, .theme-handotai .dark { background: linear-gradient(90deg, #22d3ee, #34d399); color: #04121c; }
.theme-handotai .ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.theme-handotai .note kbd { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.theme-handotai .mode .ic.quiz { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.theme-handotai .mode .ic.book { background: linear-gradient(135deg, #059669, #34d399); }
.theme-handotai .about a, .theme-handotai .weak-link, .theme-handotai .bookfoot button { color: var(--accent); }
.theme-handotai footer, .theme-handotai footer a { color: var(--mute); }
.theme-handotai .wbr { border-top-color: var(--line); }
.theme-handotai .wbr .sw { background: #2a3a55; }

/* プレイの画面：ウエハーの地図のような格子と、金属のベルト */
.theme-handotai .stage { background: linear-gradient(#0c1730, #08111f); box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); }
.theme-handotai .stage .wall {
  background:
    radial-gradient(circle at 50% 120%, rgba(34, 211, 238, .14), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(34, 211, 238, .08) 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(34, 211, 238, .08) 39px 40px);
}
.theme-handotai .hud, .theme-handotai .hud b, .theme-handotai .hud .cname { color: var(--ink); }
.theme-handotai .belt { background: repeating-linear-gradient(90deg, #1b2638 0 24px, #142033 24px 48px); border-top-color: #2c3d58; border-bottom-color: #0a1220; }
.theme-handotai .sent { color: var(--mute); }
.theme-handotai .sent .tp { background: rgba(34, 211, 238, .14); color: var(--ink); }
.theme-handotai .sent mark { background: linear-gradient(transparent 55%, rgba(52, 211, 153, .45) 55%); color: var(--ink); }
.theme-handotai .focus .y .dn, .theme-handotai .focus .r .dn { color: #3b4d6b; }

/* ベルトのカード：金色のピンが付いた IC チップ */
.theme-handotai .es {
  background: linear-gradient(160deg, #1a2a46, #0f1a2e); color: var(--chip-ink); border-radius: 8px;
  border: 1px solid rgba(34, 211, 238, .35); padding-top: 34px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.theme-handotai .es::before, .theme-handotai .es::after {
  content: ""; position: absolute; top: 18px; bottom: 18px; width: 6px;
  background: repeating-linear-gradient(180deg, #d4a94a 0 6px, transparent 6px 14px);
}
.theme-handotai .es::before { left: -6px; border-radius: 2px 0 0 2px; }
.theme-handotai .es::after { right: -6px; border-radius: 0 2px 2px 0; }
.theme-handotai .es .t { position: absolute; left: 12px; right: 12px; top: 8px; color: var(--mute); border-bottom-color: var(--line); }
.theme-handotai .es .w { color: var(--chip-ink); margin-top: 22px; }
.theme-handotai .es .m { color: var(--sub); }
.theme-handotai .es .m b { color: var(--accent); }
.theme-handotai .es.on { outline: 3px solid var(--accent); box-shadow: 0 0 24px rgba(34, 211, 238, .45); }
.theme-handotai .es .il, .theme-handotai .choice .card .il {
  display: block; width: 30px; height: 30px; margin: 0 auto -18px; background: var(--il-chip) center / contain no-repeat; opacity: .95;
}
.theme-handotai [data-lv="2"] .il { background-image: var(--il-wafer); }
.theme-handotai [data-lv="3"] .il { background-image: var(--il-stack); }
.theme-handotai .es .il { position: absolute; left: 50%; top: 26px; margin: 0 0 0 -15px; }
.theme-handotai .es .w { margin-top: 30px; }
.theme-handotai .choice .card .il { width: 56px; height: 56px; margin-bottom: 10px; }
.theme-handotai .stamp { background: rgba(7, 14, 27, .8); }

/* 単語一覧のページ */
.theme-handotai .wl .toc a { background: var(--panel); color: var(--sub); border-color: var(--line); }
.theme-handotai .wl .it:target { background: rgba(34, 211, 238, .1); }
.theme-handotai .wl dd .ex mark { color: var(--ink); }
.theme-handotai .crumbs a { color: var(--sub); }
.theme-handotai .timer { background: rgba(255, 255, 255, .08); }
.theme-handotai .timer i { background: linear-gradient(90deg, #22d3ee, #34d399); }

/* カードを大きくし、名刺・No. の見出しは出さない。長い言葉は文字を小さくして、それでも入らなければ折り返す */
.theme-handotai .es { width: 240px; height: 200px; padding: 18px 16px 14px; }
.theme-handotai .es .t { display: none; }
.theme-handotai .es .il { top: 14px; }
.theme-handotai .es .w { margin-top: 36px; font-size: 34px; letter-spacing: .02em; white-space: nowrap; line-height: 1.25; }
.theme-handotai .es .w.long { font-size: 30px; }
.theme-handotai .es .w.xlong { font-size: 24px; }
.theme-handotai .es .w.xxlong { font-size: 18px; letter-spacing: 0; }
.theme-handotai .es .w.xxxlong { font-size: 15px; }
.theme-handotai .es .m { margin-top: 10px; font-size: 12px; }
/* カードの横のピン（金色の点）は出さない */
.theme-handotai .es::before, .theme-handotai .es::after { content: none; }

/* 工程の流れ図（プレイ中のステージの下・スマホの 4 択の下）と、工程ごとのイラスト */
.theme-handotai {
  --st-design: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='9' width='34' height='30' rx='2'/%3E%3Cpath d='M7 17h34M15 9v30' stroke='%2334d399' stroke-width='1.4'/%3E%3Cpath d='M22 32l12-12 3 3-12 12h-3z'/%3E%3C/svg%3E");
  --st-wafer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5a19 19 0 1 0 3 .2'/%3E%3Cpath d='M27 5.2l-3 3-3-3'/%3E%3Cpath d='M12 18h24M9 24h30M12 30h24M18 12v24M24 9v30M30 12v24' stroke='%2334d399' stroke-width='1.2'/%3E%3C/svg%3E");
  --st-film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='34' width='34' height='7' rx='1'/%3E%3Cpath d='M7 28h34M7 23h34' stroke='%2334d399'/%3E%3Cpath d='M16 7v9M12 12l4 4 4-4M32 7v9M28 12l4 4 4-4'/%3E%3C/svg%3E");
  --st-litho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 5h16l-3 7H19z'/%3E%3Cpath d='M20 15l-4 9M24 15v9M28 15l4 9' stroke='%2334d399'/%3E%3Cpath d='M7 28h12M29 28h12'/%3E%3Crect x='7' y='35' width='34' height='6' rx='1'/%3E%3C/svg%3E");
  --st-etch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 26h8v6h6v-6h6v6h6v-6h8v15H7z'/%3E%3Cpath d='M24 6v10M20 12l4 4 4-4' stroke='%2334d399'/%3E%3Ccircle cx='13' cy='12' r='2' stroke='%2334d399'/%3E%3Ccircle cx='35' cy='10' r='2' stroke='%2334d399'/%3E%3C/svg%3E");
  --st-dope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='30' width='34' height='11' rx='1'/%3E%3Cpath d='M14 7l3 15M24 7v15M34 7l-3 15' stroke='%2334d399'/%3E%3Ccircle cx='17' cy='35' r='1.5'/%3E%3Ccircle cx='24' cy='36' r='1.5'/%3E%3Ccircle cx='31' cy='35' r='1.5'/%3E%3C/svg%3E");
  --st-flat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='24' cy='32' rx='18' ry='7'/%3E%3Cellipse cx='24' cy='29' rx='9' ry='3.5' stroke='%2334d399'/%3E%3Cpath d='M24 8v12M36 12a14 14 0 0 1 4 8'/%3E%3Cpath d='M38 21l2-1 1 2'/%3E%3C/svg%3E");
  --st-wire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13h32M8 24h32M8 35h32'/%3E%3Cpath d='M15 13v11M33 24v11M24 13v22' stroke='%2334d399'/%3E%3Ccircle cx='15' cy='24' r='1.6'/%3E%3Ccircle cx='33' cy='35' r='1.6'/%3E%3C/svg%3E");
  --st-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 17h32M8 31h32M17 8v32M31 8v32' stroke='%2334d399' stroke-width='1.4'/%3E%3Ccircle cx='31' cy='17' r='7'/%3E%3Cpath d='M31 10v-3M38 17h3M31 24v3M24 17h-3'/%3E%3C/svg%3E");
  --st-pkg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='14' width='20' height='20' rx='2'/%3E%3Crect x='20' y='20' width='8' height='8' stroke='%2334d399'/%3E%3Cpath d='M19 14v-6M24 14v-6M29 14v-6M19 34v6M24 34v6M29 34v6M14 19H8M14 24H8M14 29H8M34 19h6M34 24h6M34 29h6'/%3E%3C/svg%3E");
  --st-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='20' width='22' height='20' rx='2'/%3E%3Cpath d='M34 6l-8 16' /%3E%3Cpath d='M33 4l4 2'/%3E%3Cpath d='M13 30l4 4 8-8' stroke='%2334d399'/%3E%3C/svg%3E");
  --st-device: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='12' width='24' height='24' rx='3'/%3E%3Crect x='19' y='19' width='10' height='10' rx='1' stroke='%2334d399'/%3E%3Cpath d='M18 12V6M24 12V6M30 12V6M18 42v-6M24 42v-6M30 42v-6M12 18H6M12 24H6M12 30H6M42 18h-6M42 24h-6M42 30h-6'/%3E%3C/svg%3E");
  --st-biz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 40h36'/%3E%3Cpath d='M10 40V24l8 5v-5l8 5v-5l8 5v11' /%3E%3Cpath d='M36 40V12h4v28'/%3E%3Cpath d='M12 16l7-5 6 4 9-7' stroke='%2334d399'/%3E%3C/svg%3E");
}
.theme-handotai [data-st="design"] .il, .theme-handotai .proc li[data-st="design"] i { background-image: var(--st-design); }
.theme-handotai [data-st="wafer"] .il, .theme-handotai .proc li[data-st="wafer"] i { background-image: var(--st-wafer); }
.theme-handotai [data-st="film"] .il, .theme-handotai .proc li[data-st="film"] i { background-image: var(--st-film); }
.theme-handotai [data-st="litho"] .il, .theme-handotai .proc li[data-st="litho"] i { background-image: var(--st-litho); }
.theme-handotai [data-st="etch"] .il, .theme-handotai .proc li[data-st="etch"] i { background-image: var(--st-etch); }
.theme-handotai [data-st="dope"] .il, .theme-handotai .proc li[data-st="dope"] i { background-image: var(--st-dope); }
.theme-handotai [data-st="flat"] .il, .theme-handotai .proc li[data-st="flat"] i { background-image: var(--st-flat); }
.theme-handotai [data-st="wire"] .il, .theme-handotai .proc li[data-st="wire"] i { background-image: var(--st-wire); }
.theme-handotai [data-st="cut"] .il, .theme-handotai .proc li[data-st="cut"] i { background-image: var(--st-cut); }
.theme-handotai [data-st="pkg"] .il, .theme-handotai .proc li[data-st="pkg"] i { background-image: var(--st-pkg); }
.theme-handotai [data-st="check"] .il, .theme-handotai .proc li[data-st="check"] i { background-image: var(--st-check); }
.theme-handotai [data-st="device"] .il, .theme-handotai .proc li[data-st="device"] i { background-image: var(--st-device); }
.theme-handotai [data-st="biz"] .il, .theme-handotai .proc li[data-st="biz"] i { background-image: var(--st-biz); }
.theme-handotai [data-st="front"] .il, .theme-handotai [data-st="all"] .il { background-image: var(--st-wafer); }

.theme-handotai .proc { margin: 14px auto 0; max-width: 1180px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px 14px; }
.theme-handotai .proc .ph { font-size: 12px; font-weight: 700; color: var(--accent); margin: 0 0 8px 4px; letter-spacing: .04em; }
.theme-handotai .proc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; counter-reset: st; }
.theme-handotai .proc li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 12px; color: var(--mute); font-size: 11px; text-align: center; opacity: .45; transition: opacity .2s, background .2s; }
.theme-handotai .proc li + li::before { content: "›"; position: absolute; left: -7px; top: 18px; color: var(--mute); font-size: 14px; }
.theme-handotai .proc li i { display: block; width: 34px; height: 34px; background: center / contain no-repeat; }
.theme-handotai .proc li span { white-space: nowrap; }
.theme-handotai .proc li.on { opacity: 1; color: var(--ink); background: rgba(34, 211, 238, .12); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .55), 0 0 18px rgba(34, 211, 238, .25); font-weight: 700; }
.theme-handotai .proc.other li { opacity: .3; }
@media (max-width: 820px) {
  .theme-handotai .proc { padding: 10px; }
  .theme-handotai .proc ol { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 8px; }
  .theme-handotai .proc li + li::before { content: none; }
  .theme-handotai .proc li i { width: 26px; height: 26px; }
  .theme-handotai .proc li { font-size: 10px; padding: 6px 0 4px; }
}

/* カードのイラストを大きく、スマホの工程名は折り返して重ならないように */
.theme-handotai .es .il { width: 44px; height: 44px; top: 12px; margin-left: -22px; }
.theme-handotai .es .w { margin-top: 46px; }
@media (max-width: 820px) {
  .theme-handotai .proc li span { white-space: normal; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; font-size: 9px; }
}

/* 流れ図はステージ（スマホは言葉のカード）の上に置く */
.theme-handotai .proc { margin: 0 auto 14px; }

/* 範囲の言葉（前工程全体・工場全体）にも専用の絵。カードのイラストの下に分類名を出す */
.theme-handotai { --st-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='12' width='34' height='28' rx='2'/%3E%3Cpath d='M7 18h34'/%3E%3Cpath d='M14 8v4M24 8v4M34 8v4' stroke='%2334d399'/%3E%3Cpath d='M16 24v8M24 24v8M32 24v8' stroke='%2334d399' stroke-dasharray='2 3'/%3E%3Cpath d='M12 36h24'/%3E%3C/svg%3E"); --st-all: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 41h38'/%3E%3Cpath d='M8 41V24l9 6v-6l9 6v-6l9 6v11'/%3E%3Cpath d='M37 41V10h5v31'/%3E%3Cpath d='M38 6c2-1 3 0 4-1' stroke='%2334d399'/%3E%3Cpath d='M13 35h3M21 35h3M29 35h3' stroke='%2334d399'/%3E%3C/svg%3E"); }
.theme-handotai [data-st="front"] .il, .theme-handotai [data-st="front"].card .il { background-image: var(--st-front); }
.theme-handotai [data-st="all"] .il, .theme-handotai [data-st="all"].card .il { background-image: var(--st-all); }
.theme-handotai .es .ct { display: block; position: absolute; left: 0; right: 0; top: 58px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.theme-handotai .es .w { margin-top: 60px; }
.theme-handotai .es .m { margin-top: 8px; }

/* ===== 演出（handotai.js が付けるクラス）。動きは「動きを減らす」設定でない人だけ。色の変化はだれにでも ===== */
/* 暗い背景に合わせて直す：称号のラベル・カウントダウンの幕・答えのボタン */
.theme-handotai .score .rank { background: linear-gradient(90deg, #22d3ee, #34d399); color: #04121c; }
.theme-handotai .countdown { background: rgba(7, 14, 27, .72); color: #e6f1ff; text-shadow: 0 0 28px rgba(34, 211, 238, .8); }
.theme-handotai .countdown::before { content: ""; position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(34, 211, 238, .45);
  background: repeating-linear-gradient(90deg, transparent 0 21px, rgba(34, 211, 238, .14) 21px 23px), repeating-linear-gradient(0deg, transparent 0 21px, rgba(34, 211, 238, .14) 21px 23px); z-index: -1; }
.theme-handotai .countdown { isolation: isolate; }
.theme-handotai :is(.opt, .two .op).right { background: rgba(52, 211, 153, .16); border-color: #34d399; color: var(--ink); box-shadow: 0 0 22px rgba(52, 211, 153, .35); }
.theme-handotai :is(.opt, .two .op).wrong { background: rgba(248, 113, 113, .12); border-color: #f87171; color: var(--sub); }
.theme-handotai .stamp { background: rgba(7, 14, 27, .85); }

/* 1. 背景の回路を流れる光 */
.fx-circuit { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.fx-circuit path { fill: none; stroke: #22d3ee; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 26 900; stroke-dashoffset: 926; opacity: .55; filter: drop-shadow(0 0 4px #22d3ee); animation: fx-current linear infinite; }
@keyframes fx-current { to { stroke-dashoffset: 0; } }

/* 色の変化（動かない演出）：コンボでベルトとステージの光の色が変わる・答えの色・単語帳の切り替え */
.theme-handotai .stage[data-combo="1"] .belt { box-shadow: 0 0 22px rgba(34, 211, 238, .45); }
.theme-handotai .stage[data-combo="2"] .belt { box-shadow: 0 0 26px rgba(52, 211, 153, .55); border-top-color: #34d399; }
.theme-handotai .stage[data-combo="3"] .belt { box-shadow: 0 0 34px rgba(163, 230, 53, .65); border-top-color: #a3e635; }
.theme-handotai .stage[data-combo="3"] { box-shadow: 0 0 0 1px rgba(163, 230, 53, .4), 0 26px 60px rgba(0, 0, 0, .5); }
.theme-handotai .es.fx-danger:not(.done) { border-color: #f87171; outline-color: #f87171; }
.theme-handotai .focus .r.fx-miss .cu { color: #f87171; border-color: #f87171; }
.fx-banner { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); z-index: 9; white-space: nowrap; pointer-events: none;
  font: 900 26px "Zen Kaku Gothic New", sans-serif; color: #e6f1ff; padding: 10px 28px; border-radius: 999px; overflow: hidden;
  background: rgba(7, 14, 27, .8); border: 1px solid rgba(34, 211, 238, .6); box-shadow: 0 0 30px rgba(34, 211, 238, .4); }
.fx-banner.fx-complete { border-color: #a3e635; box-shadow: 0 0 36px rgba(163, 230, 53, .5); color: #ecfccb; }
.fx-plus { position: fixed; z-index: 61; transform: translate(-50%, -50%); pointer-events: none; font: 800 15px Inter, sans-serif; color: #a5f3fc; text-shadow: 0 0 10px #22d3ee; }
.fx-dark { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: rgba(2, 6, 14, .78); }
.fx-wafer { width: 112px; height: 112px; margin: 2px auto 10px; }
.fx-wafer svg { width: 100%; height: 100%; display: block; }
.fx-wafer circle { fill: rgba(34, 211, 238, .05); stroke: rgba(34, 211, 238, .5); stroke-width: 1.2; }
.fx-wafer rect { fill: rgba(34, 211, 238, .1); transition: fill .15s; }
.fx-wafer rect.on { fill: #22d3ee; }
.fx-wafer rect.on:nth-child(3n) { fill: #34d399; }
.wbr.fx-toggled { background: rgba(34, 211, 238, .12); }
.fx-burst { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.theme-handotai :is(.course, .mode, .btn, .opt, .op, .weak-link) { position: relative; overflow: hidden; }

@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@media (prefers-reduced-motion: no-preference) {
  /* 34. 画面の切り替え */
  .theme-handotai .fx-enter { animation: fx-enter .45s ease both; }
  @keyframes fx-enter { from { opacity: 0; translate: 0 14px; } }
  /* 5. スタート画面：コースとメニューが下から順に出る */
  .theme-handotai #start:not([hidden]) :is(.course, .mode) { animation: fx-rise .55s cubic-bezier(.2, .8, .2, 1) both; }
  .theme-handotai #start .course:nth-child(2), .theme-handotai #start .mode:nth-child(2) { animation-delay: .07s; }
  .theme-handotai #start .course:nth-child(3) { animation-delay: .14s; }
  .theme-handotai #start .course:nth-child(4) { animation-delay: .21s; }
  @keyframes fx-rise { from { opacity: 0; translate: 0 22px; } }
  /* 2. 見出しの文字に光が走る */
  .theme-handotai .start h1 em { background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%), linear-gradient(90deg, #22d3ee, #34d399 55%, #a3e635);
    background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: fx-shine 4.5s ease-in-out infinite; }
  @keyframes fx-shine { 0%, 55% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
  /* 3. コースにマウスを乗せると、枠を光がなぞる。9. 打っている対象のカードも光が一周する */
  .theme-handotai .course::after, .theme-handotai .es.on::before {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--fx-a), transparent 0 62%, #22d3ee 78%, #34d399 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .25s; animation: fx-spin 1.8s linear infinite;
  }
  .theme-handotai .course:hover::after, .theme-handotai .es.on::before { opacity: 1; }
  .theme-handotai .course::after { inset: 0; }
  .theme-handotai .es.on::before { left: -3px; right: -3px; top: -3px; bottom: -3px; width: auto; border-radius: 10px; }
  @keyframes fx-spin { to { --fx-a: 360deg; } }
  /* 4. コースを選ぶと沈み込む */
  .theme-handotai .course.fx-press { animation: fx-press .28s ease; }
  @keyframes fx-press { 40% { scale: .95; } }
  /* 6. カウントダウン：露光されるように浮かび上がる */
  .theme-handotai .countdown.fx-expose { animation: fx-expose .55s ease-out; }
  @keyframes fx-expose { from { filter: blur(10px) brightness(2.5); opacity: 0; scale: 1.5; } }
  .theme-handotai .countdown.fx-expose::before { animation: fx-ring .55s ease-out; }
  @keyframes fx-ring { from { opacity: 0; scale: .6; } }
  /* 7. スタートの瞬間のスキャンライン */
  .theme-handotai .stage.fx-scan::after { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; z-index: 7; pointer-events: none;
    background: linear-gradient(transparent, rgba(34, 211, 238, .38), transparent); animation: fx-scan .9s ease-out forwards; }
  @keyframes fx-scan { to { top: 100%; } }
  /* 8. カードが上から降りてベルトに乗る */
  .theme-handotai .es.fx-drop { animation: fx-drop .5s cubic-bezier(.2, .9, .3, 1.25) both; }
  @keyframes fx-drop { from { translate: 0 -170px; opacity: 0; } 70% { translate: 0 8px; opacity: 1; } }
  /* 10. 打つたびにカードの絵が脈打つ */
  .theme-handotai .es .il.fx-pulse { animation: fx-pulse .22s ease; }
  @keyframes fx-pulse { 50% { scale: 1.28; filter: drop-shadow(0 0 8px #22d3ee); } }
  /* 12. 右端に近づいたカードの点滅 */
  .theme-handotai .es.fx-danger:not(.done) { animation: fx-danger .45s ease-in-out infinite alternate; }
  @keyframes fx-danger { to { box-shadow: 0 0 26px rgba(248, 113, 113, .7); } }
  /* 13. 正解したカードの光と火花 */
  .fx-ghost { position: fixed; z-index: 60; pointer-events: none; white-space: nowrap; font: 900 28px "Zen Kaku Gothic New", sans-serif; color: #e6f1ff; text-shadow: 0 0 18px #22d3ee, 0 0 4px #fff; transform: translate(-50%, -50%); }
  .fx-spark { position: fixed; z-index: 60; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #a5f3fc; box-shadow: 0 0 10px #22d3ee; pointer-events: none; }
  /* 14. 吸い込まれた工程が光り、＋1 が浮かぶ */
  .theme-handotai .proc li.fx-hit, .theme-handotai .proc.fx-hit { animation: fx-hit .7s ease-out; }
  @keyframes fx-hit { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .8); } 100% { box-shadow: 0 0 0 16px rgba(34, 211, 238, 0); } }
  .fx-plus { animation: fx-plus .9s ease-out forwards; }
  @keyframes fx-plus { to { opacity: 0; translate: 0 -26px; } }
  /* 15. 「済」のスタンプをドンと押す */
  .theme-handotai .stamp { animation: fx-stamp .38s cubic-bezier(.2, 1.6, .4, 1); }
  @keyframes fx-stamp { from { scale: 2.6; opacity: 0; } 60% { scale: .9; opacity: 1; } }
  /* 16. 点数が増えるたびに弾む */
  .theme-handotai .fx-pop { display: inline-block; animation: fx-pop .2s ease; }
  @keyframes fx-pop { 50% { scale: 1.18; color: #a5f3fc; } }
  /* 17. ミスした文字が震える。18. ステージにノイズ */
  .theme-handotai .focus .r.fx-miss .cu { animation: fx-misscu .3s ease; }
  @keyframes fx-misscu { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
  .theme-handotai .stage.fx-glitch::before { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0;
    background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(248, 113, 113, .16) 5px 7px); animation: fx-glitch .3s steps(3); }
  @keyframes fx-glitch { 0%, 66% { opacity: 1; translate: 6px 0; } 33% { translate: -6px 0; } }
  /* 19. コンボの一言（光の線が横切る） */
  .fx-banner { animation: fx-banner 1.6s ease forwards; }
  @keyframes fx-banner { 0% { opacity: 0; scale: .6; } 14% { opacity: 1; scale: 1.06; } 24% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -18px; } }
  .fx-banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); animation: fx-sweep 1s .15s ease-out forwards; }
  @keyframes fx-sweep { to { left: 120%; } }
  /* 22. 範囲の言葉は、流れ図を左から順に光が走る */
  .theme-handotai .proc li.on { animation: fx-lit .45s ease both; }
  .theme-handotai .proc.fx-sweep li.on { animation-delay: calc(var(--i) * 45ms); }
  @keyframes fx-lit { from { opacity: .45; background: transparent; box-shadow: none; } }
  /* 21. 工程を移る光の点 */
  .fx-dot { position: fixed; z-index: 30; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #e0fbff; box-shadow: 0 0 14px #22d3ee, 0 0 4px #fff; pointer-events: none; }
  /* 24. 時間切れで照明が落ちる */
  .fx-dark { animation: fx-dark .85s ease-in both; }
  @keyframes fx-dark { from { background: rgba(2, 6, 14, 0); } }
  /* 26. 称号のラベルが裏返って現れる */
  .theme-handotai #rank.fx-flip { animation: fx-flip .7s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes fx-flip { from { transform: perspective(300px) rotateY(100deg); opacity: 0; } }
  /* 28. 答え：正解は弾む、不正解は震える */
  .theme-handotai :is(.opt, .two .op).right { animation: fx-right .45s cubic-bezier(.2, 1.6, .4, 1); }
  @keyframes fx-right { 40% { scale: 1.04; } }
  .theme-handotai :is(.opt, .two .op).wrong { animation: fx-wrong .35s ease; }
  @keyframes fx-wrong { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
  .theme-handotai .choice .card.fx-combo { animation: fx-right .5s ease; box-shadow: 0 0 34px rgba(52, 211, 153, .45); }
  /* 29. 次の問題がスライドして入れ替わる */
  .theme-handotai .fx-slide { animation: fx-slide .35s ease both; }
  @keyframes fx-slide { from { opacity: 0; translate: 28px 0; } }
  /* 30. 波紋 */
  .fx-ripple { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(34, 211, 238, .45); pointer-events: none; animation: fx-ripple .6s ease-out forwards; }
  @keyframes fx-ripple { to { transform: scale(28); opacity: 0; } }
  /* 31. 単語一覧・単語帳の行が順に出る */
  .wl .it.fx-hide { opacity: 0; translate: 0 14px; }
  .wl .it.fx-show { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .5s ease; }
  #wbList.fx-reveal .wbr { animation: fx-rise .4s ease both; animation-delay: calc(var(--n, 0) * 18ms); }
  /* 32. 単語帳で切り替えた行が光る */
  .wbr.fx-toggled { animation: fx-toggle .6s ease; }
  @keyframes fx-toggle { from { background: rgba(34, 211, 238, .28); } to { background: transparent; } }
}

/* 白い面のまま残っていたところ：単語帳の「もう出さない」・まとめて外すボタン・スマホの例文・2 択の補足 */
.theme-handotai :is(.hide, .bulk) { background: rgba(255, 255, 255, .06); color: var(--sub); border-color: var(--line); }
.theme-handotai :is(.hide, .bulk):hover { color: var(--ink); border-color: rgba(34, 211, 238, .5); }
.theme-handotai .choice .card .exs { background: rgba(255, 255, 255, .05); color: var(--sub); }
.theme-handotai .qz .q small { background: rgba(255, 255, 255, .06); color: var(--sub); }

/* スマホのカードの絵も分類ごとに（上の .choice .card .il の指定より強くする） */
.theme-handotai .choice .card[data-st="design"] .il { background-image: var(--st-design); }
.theme-handotai .choice .card[data-st="wafer"] .il { background-image: var(--st-wafer); }
.theme-handotai .choice .card[data-st="film"] .il { background-image: var(--st-film); }
.theme-handotai .choice .card[data-st="litho"] .il { background-image: var(--st-litho); }
.theme-handotai .choice .card[data-st="etch"] .il { background-image: var(--st-etch); }
.theme-handotai .choice .card[data-st="dope"] .il { background-image: var(--st-dope); }
.theme-handotai .choice .card[data-st="flat"] .il { background-image: var(--st-flat); }
.theme-handotai .choice .card[data-st="wire"] .il { background-image: var(--st-wire); }
.theme-handotai .choice .card[data-st="cut"] .il { background-image: var(--st-cut); }
.theme-handotai .choice .card[data-st="pkg"] .il { background-image: var(--st-pkg); }
.theme-handotai .choice .card[data-st="check"] .il { background-image: var(--st-check); }
.theme-handotai .choice .card[data-st="device"] .il { background-image: var(--st-device); }
.theme-handotai .choice .card[data-st="biz"] .il { background-image: var(--st-biz); }
.theme-handotai .choice .card[data-st="front"] .il { background-image: var(--st-front); }
.theme-handotai .choice .card[data-st="all"] .il { background-image: var(--st-all); }
.theme-handotai .choice .card .exs mark { background: rgba(52, 211, 153, .28); color: var(--ink); }

/* 「もう出さない」：押す前は縁取りのボタン、押したあと（出さない）はシアンの面にして、どちらも読めるように */
.theme-handotai .hide { background: transparent; color: #cfe3f7; border: 1px solid rgba(159, 179, 204, .45); }
.theme-handotai .hide:hover { color: #fff; border-color: #22d3ee; }
.theme-handotai .hide.on { background: rgba(34, 211, 238, .18); border-color: #22d3ee; color: #a5f3fc; }
.theme-handotai .bulk { background: transparent; color: #cfe3f7; border: 1px solid rgba(159, 179, 204, .45); }
.theme-handotai .bulk .o { background: rgba(52, 211, 153, .2); color: #34d399; }

/* 見えにくかったところ：2 択の F・J のキー、光っていない工程の名前、打ち終わった文字 */
.theme-handotai .two kbd { background: #1b2a44; color: #e6f1ff; border-color: rgba(159, 179, 204, .5); box-shadow: 0 3px 0 rgba(159, 179, 204, .35); }
.theme-handotai .two kbd::after { background: #8fa3bd; }
.theme-handotai .proc li { opacity: .75; }
.theme-handotai .proc.other li { opacity: .6; }
.theme-handotai .proc li span { color: #aec0d6; }
.theme-handotai .focus .y .dn, .theme-handotai .focus .r .dn { color: #6f86a6; }

/* 結果の単語帳：読み（ひらがな）と例文は出さず、言葉と意味だけにする。言葉の欄は長い言葉も 1 行で入る幅に */
.theme-handotai .wrow .y, .theme-handotai .wrow .ex { display: none; }
.theme-handotai .wrow { grid-template-columns: 22px minmax(150px, max-content) minmax(0, 1fr) auto; }
.theme-handotai .wrow b { white-space: nowrap; font-size: 17px; }
@media (max-width: 820px) {
  .theme-handotai .wrow { grid-template-columns: 22px minmax(0, max-content) minmax(0, 1fr) auto; }
  .theme-handotai .wrow b { font-size: 15px; }
}