/* packages/web/global.css */
:root {
  --bg-screen: #f5f4ed;
  --bg-surface: #fff;
  --text-main: #232533;
  --text-muted: #686d76;
  --border-ui: #3a3d4d;
  --color-tank-a: #ff4757;
  --color-tank-a-shade: #c41829;
  --color-tank-a-ink: #c41829;
  --color-tank-a-tint: #ffe7e9;
  --color-tank-b: #1e90ff;
  --color-tank-b-shade: #0e5fb8;
  --color-tank-b-ink: #0e5fb8;
  --color-tank-b-tint: #e4f0ff;
  --color-coin-gold: #ffa502;
  --color-coin-gold-shade: #d67000;
  --color-coin-gold-ink: #9a4d00;
  --color-coin-gold-tint: #fff0d4;
  --color-shield-cyan: #00d2d3;
  --color-shield-cyan-shade: #01a3a4;
  --color-shield-cyan-ink: #006b6c;
  --color-shield-cyan-tint: #d9f7f7;
  --color-leaf-green: #2ed573;
  --color-leaf-green-shade: #17a05d;
  --color-leaf-green-ink: #11773f;
  --color-leaf-green-tint: #ddf7e8;
  --color-field-empty: #efeeda;
  --color-field-brick: #e67e22;
  --color-field-steel: #747d8c;
  --color-field-water: #70a1ff;
  --bg: var(--bg-screen);
  --bg-soft: #f1efe6;
  --bg-deep: #e9e6d8;
  --panel: var(--bg-surface);
  --panel-2: #f8f7f1;
  --line: var(--border-ui);
  --line-soft: #d6d2c4;
  --text: var(--text-main);
  --text-sub: #5c616b;
  --text-faint: var(--text-muted);
  --text-on-color: #fff;
  --brand: var(--color-tank-a);
  --brand-strong: var(--color-tank-a-shade);
  --brand-ink: var(--color-tank-a-ink);
  --brand-soft: var(--color-tank-a-tint);
  --brand-text: var(--text-on-color);
  --accent: var(--color-tank-b);
  --accent-strong: var(--color-tank-b-shade);
  --accent-ink: var(--color-tank-b-ink);
  --accent-soft: var(--color-tank-b-tint);
  --focus: var(--color-tank-b);
  --player-a: var(--color-tank-a);
  --player-a-deep: var(--color-tank-a-shade);
  --player-a-ink: var(--color-tank-a-ink);
  --player-a-soft: var(--color-tank-a-tint);
  --player-b: var(--color-tank-b);
  --player-b-deep: var(--color-tank-b-shade);
  --player-b-ink: var(--color-tank-b-ink);
  --player-b-soft: var(--color-tank-b-tint);
  --ok: var(--color-leaf-green);
  --ok-strong: var(--color-leaf-green-shade);
  --ok-ink: var(--color-leaf-green-ink);
  --ok-soft: var(--color-leaf-green-tint);
  --warn: var(--color-coin-gold);
  --warn-strong: var(--color-coin-gold-shade);
  --warn-ink: var(--color-coin-gold-ink);
  --warn-soft: var(--color-coin-gold-tint);
  --danger: var(--color-tank-a);
  --danger-strong: var(--color-tank-a-shade);
  --danger-ink: var(--color-tank-a-ink);
  --danger-soft: var(--color-tank-a-tint);
  --shield: var(--color-shield-cyan);
  --shield-strong: var(--color-shield-cyan-shade);
  --shield-ink: var(--color-shield-cyan-ink);
  --shield-soft: var(--color-shield-cyan-tint);
  --blk-move: var(--color-tank-b);
  --blk-move-soft: var(--color-tank-b-tint);
  --blk-move-strong: var(--color-tank-b-shade);
  --blk-attack: var(--color-tank-a);
  --blk-attack-soft: var(--color-tank-a-tint);
  --blk-attack-strong: var(--color-tank-a-shade);
  --blk-control: var(--color-coin-gold);
  --blk-control-soft: var(--color-coin-gold-tint);
  --blk-control-strong: var(--color-coin-gold-shade);
  --blk-var: var(--color-shield-cyan);
  --blk-var-soft: var(--color-shield-cyan-tint);
  --blk-var-strong: var(--color-shield-cyan-shade);
  --blk-other: #9a9da6;
  --blk-other-soft: var(--panel-2);
  --blk-other-strong: #6e717b;
  --cell-empty: var(--color-field-empty);
  --cell-empty-2: #e8e7cf;
  --cell-brick: var(--color-field-brick);
  --cell-brick-hi: #f7ae66;
  --cell-brick-edge: #9e4b0e;
  --cell-brick-weak: #d06a15;
  --cell-steel: var(--color-field-steel);
  --cell-steel-hi: #aeb6c2;
  --cell-steel-edge: #4d5462;
  --cell-water: var(--color-field-water);
  --cell-water-hi: #bbd3ff;
  --grid-line: #dcdac0;
  --shrink-danger: #ff475747;
  --shrink-wall: #6e5a73;
  --tank-mark: #fff;
  --tank-edge: var(--border-ui);
  --missile: var(--color-coin-gold);
  --missile-edge: var(--border-ui);
  --missile-trail: #d6700073;
  --explosion: #ff7b22;
  --explosion-core: #ffd84d;
  --barrier-arc: #00d2d373;
  --barrier-edge: var(--color-shield-cyan-shade);
  --supply: var(--color-coin-gold);
  --supply-edge: var(--color-coin-gold-shade);
  --path-guide: #17a05de6;
  --lead-guide: #d81b60;
  --bounce-guide: var(--color-tank-a-ink);
  --chart-axis: #8c8f98;
  --chart-grid: #e6e3d6;
  --chart-hit: var(--color-leaf-green-shade);
  --chart-miss: var(--color-tank-a);
  --heat: var(--color-tank-a);
  --heat-low: #ff475729;
  --heat-high: #ff4757d9;
  --bw: 2.5px;
  --bw-sm: 2px;
  --radius-plate: 20px;
  --radius: 16px;
  --radius-sm: 10px;
  --shade-plate: #d3cebe;
  --shadow-plate: 0 4px 0 var(--shade-plate);
  --shadow-part: 0 3px 0 var(--shade-plate);
  --shadow-pop: 0 6px 0 var(--shade-plate);
  --shadow-inset: inset 0 3px 0 var(--bg-deep);
  --scrim: #23253394;
  --font: "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-mono: "Cascadia Code", "Consolas", "BIZ UDGothic", "MS Gothic", monospace;
}

/* packages/web/teachers/teachers.css */
* {
  box-sizing: border-box;
}

html, body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  --buncss-light: initial;
  --buncss-dark: ;
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  overflow-x: clip;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.8;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 56px;
}

.tp-top {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 14px;
  padding: 12px 2px;
}

.tp-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--panel);
  border-bottom: 3px solid var(--line);
  box-shadow: var(--shadow-plate);
  inset: 0 calc(50% - 50vw);
}

.tp-logo {
  letter-spacing: .02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 900;
}

.tp-logo .accent {
  color: var(--brand-ink);
}

.tp-back {
  color: var(--text);
  text-decoration: none;
  background: var(--panel);
  border: var(--bw-sm) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 0 var(--line);
  padding: 5px 12px;
  transition: transform 50ms, box-shadow 50ms;
  font-size: 14px;
  font-weight: 800;
}

.tp-back:hover {
  background: var(--panel-2);
}

.tp-back:active {
  box-shadow: 0 0 0 var(--line);
  transform: translateY(3px);
}

.tp-foot {
  background: var(--panel-2);
  border: var(--bw-sm) dashed var(--line-soft);
  border-radius: var(--radius);
  color: var(--text-sub);
  text-align: center;
  margin-top: 40px;
  padding: 16px 12px;
  font-size: 14px;
}

.tp-foot a {
  color: var(--text-sub);
  white-space: nowrap;
  font-weight: 700;
}

.tp-foot a:hover {
  color: var(--accent-ink);
}

.tp-copy {
  display: block;
  color: var(--text-faint);
  margin-top: 10px;
  font-size: 12.5px;
}

.tp-updated {
  color: var(--text-faint);
  margin-top: 14px;
  font-size: 13px;
}

h1 {
  letter-spacing: -.01em;
  text-shadow: 0 3px 0 var(--shade-plate);
  margin: 18px 0 12px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.35;
}

.tp-crumbs {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-sub);
  margin: 16px 0 0;
}

.tp-crumbs a {
  color: var(--accent-ink);
}

.tp-crumbs + h1 {
  margin-top: 6px;
}

.tp-lead {
  color: var(--text-sub);
  margin: 0 0 8px;
  font-size: 17px;
}

.tp-lead b {
  color: var(--text);
}

.tp-sec {
  --sec-color: var(--brand);
  --sec-shade: var(--brand-strong);
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-plate);
  box-shadow: var(--shadow-plate);
  margin-top: 22px;
  padding: 20px 22px;
}

.tp-sec:nth-of-type(4n+2) {
  --sec-color: var(--accent);
  --sec-shade: var(--accent-strong);
}

.tp-sec:nth-of-type(4n+3) {
  --sec-color: var(--warn);
  --sec-shade: var(--warn-strong);
}

.tp-sec:nth-of-type(4n+4) {
  --sec-color: var(--shield);
  --sec-shade: var(--shield-strong);
}

.tp-sec h2 {
  display: flex;
  align-items:  center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
}

.tp-sec h2:before {
  content: "";
  border: var(--bw-sm) solid var(--line);
  background: var(--sec-color);
  box-shadow: 0 3px 0 var(--sec-shade);
  border-radius: 999px;
  flex: none;
  width: 10px;
  height: 26px;
}

.tp-sec p {
  margin: 0 0 10px;
}

.tp-sec ul, .tp-sec ol {
  margin: 0 0 10px;
  padding-left: 1.3em;
}

.tp-sec li {
  margin-bottom: 6px;
}

.tp-sec li::marker {
  color: var(--text-sub);
  font-weight: 900;
}

.tp-note {
  color: var(--text-sub);
  border-left: 4px solid var(--line-soft);
  padding-left: 12px;
  font-size: 15px;
}

.tp-tip {
  color: var(--text);
  border: var(--bw-sm) solid var(--line);
  border-left: 8px solid var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 15px;
}

.tp-goal {
  position: relative;
  background: var(--warn-soft);
  border: var(--bw) solid var(--line);
  border-left: 10px solid var(--warn);
  border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--warn-strong);
  margin-top: 22px;
  padding: 14px 18px 14px 20px;
}

.tp-goal b {
  color: var(--warn-ink);
}

.tp-todo {
  --sec-color: var(--line-soft);
  --sec-shade: var(--shade-plate);
  background: var(--panel-2);
  color: var(--text-sub);
  border: var(--bw-sm) dashed var(--text-faint);
  box-shadow: none;
}

.tp-todo h2 {
  color: var(--text-sub);
  font-size: 18px;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 6px 0 4px;
  font-size: 15px;
}

th, td {
  border: var(--bw-sm) solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
}

th {
  background: var(--panel-2);
  color: var(--text-sub);
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 3px solid var(--line);
  font-size: 13px;
  font-weight: 900;
}

tr:nth-child(2n) td {
  background: var(--panel-2);
}

table.tp-time th:first-child, table.tp-time td:first-child {
  white-space: nowrap;
  width: 1%;
}

table.tp-time td:first-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg-soft);
  border-right: 3px solid var(--line);
  font-weight: 900;
}

table.tp-time td:nth-child(2) {
  white-space: nowrap;
  color: var(--warn-ink);
  width: 1%;
  font-weight: 900;
}

table.tp-flow td:first-child, table.tp-flow td:nth-child(2) {
  white-space: nowrap;
}

table.tp-flow td:first-child {
  font-family: var(--font-mono);
  color: var(--warn-ink);
  text-align: center;
  font-weight: 900;
}

table.tp-flow td:nth-child(2) {
  font-weight: 800;
}

.tp-stage, .tp-challenge {
  display: inline-block;
  background: var(--panel);
  border: var(--bw-sm) solid var(--line);
  box-shadow: 0 2px 0 var(--shade-plate);
  white-space: nowrap;
  border-radius: 8px;
  margin: 1px 0 3px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

.tp-challenge {
  background: var(--warn-soft);
  box-shadow: 0 2px 0 var(--warn-strong);
}

code {
  font-family: var(--font-mono);
  background: var(--bg-soft);
  color: var(--accent-ink);
  border-radius: 5px;
  padding: 0 5px;
  font-size: .92em;
}

.tp-points, .tp-cards {
  display: grid;
  gap: 14px;
  margin: 10px 0 4px;
}

.tp-points {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tp-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-point {
  background: var(--panel);
  border: var(--bw-sm) solid var(--line);
  border-left: 8px solid var(--sec-color, var(--brand));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-part);
  padding: 10px 14px 12px;
}

.tp-point h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 900;
}

.tp-point p {
  color: var(--text-sub);
  margin: 0;
  font-size: 15px;
}

.tp-card {
  --card-color: var(--brand);
  position: relative;
  display: grid;
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-top: 10px solid var(--card-color);
  border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--line);
  color: var(--text);
  text-decoration: none;
  align-content:  start;
  gap: 6px;
  padding: 16px 16px 42px;
  transition: transform 50ms, box-shadow 50ms;
}

.tp-card:nth-child(2) {
  --card-color: var(--accent);
}

.tp-card:nth-child(3) {
  --card-color: var(--warn);
}

.tp-card:hover {
  background: var(--panel-2);
}

.tp-card:active {
  box-shadow: 0 0 0 var(--line);
  transform: translateY(5px);
}

.tp-card b {
  font-size: 19px;
  font-weight: 900;
}

.tp-card span {
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.65;
}

.tp-card:after {
  content: "授業案を見る ▶";
  position: absolute;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 900;
  bottom: 12px;
  left: 16px;
}

.tp-faq h3 {
  display: flex;
  align-items:  flex-start;
  gap: 8px;
  margin: 18px 0 4px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
}

.tp-faq h3:before {
  content: "Q";
  display: inline-flex;
  font-family: var(--font-mono);
  color: var(--text);
  background: var(--warn);
  border: var(--bw-sm) solid var(--line);
  box-shadow: 0 2px 0 var(--warn-strong);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items:  center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  font-size: 13px;
}

.tp-faq h3:first-of-type {
  margin-top: 0;
}

.tp-faq p {
  color: var(--text-sub);
  margin: 0 0 6px;
  padding-left: 32px;
}

.tp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 6px 0 0;
}

.tp-links a {
  color: var(--accent-ink);
  font-weight: 800;
}

a {
  color: var(--accent-ink);
}

.tp-cta {
  text-align: center;
  margin: 34px 0 0;
}

.tp-cta a {
  display: inline-block;
  background: var(--brand);
  color: var(--brand-text);
  border: var(--bw) solid var(--line);
  border-bottom-color: var(--brand-strong);
  border-radius: var(--radius);
  text-decoration: none;
  text-shadow: 0 2px 0 var(--brand-strong);
  box-shadow: 0 5px 0 var(--brand-strong);
  padding: 13px 32px;
  transition: transform 50ms, box-shadow 50ms, filter .1s;
  font-size: 18px;
  font-weight: 900;
}

.tp-cta a:hover {
  filter: brightness(1.06);
}

.tp-cta a:active {
  box-shadow: 0 0 0 var(--brand-strong);
  transform: translateY(5px);
}

.lab-summary {
  font-family: var(--font-mono);
  letter-spacing: .08em;
  margin: 8px 0;
  font-size: 40px;
  font-weight: 800;
}

.lab-pre {
  font-family: var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 13px;
}

.tp-back.lab-copy {
  display: inline-block;
  font: inherit;
  cursor: pointer;
  font-weight: 800;
}

.tp-back.lab-copy[hidden] {
  display: none;
}

.lab-speed {
  white-space: pre-line;
}

@media (max-width: 720px) {
  h1 {
    font-size: 26px;
  }

  .tp-top {
    flex-wrap: nowrap;
    padding: 10px 2px;
  }

  .tp-back {
    display: none;
  }

  .tp-logo {
    font-size: 20px;
  }

  .tp-sec {
    padding: 16px 14px;
  }

  .tp-points, .tp-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  th, .tp-stage, .tp-challenge {
    white-space: normal;
  }

  table {
    font-size: 14px;
  }

  th, td {
    padding: 6px 7px;
  }

  table.tp-time td:nth-child(2), table.tp-flow td:nth-child(2) {
    white-space: normal;
  }

  .tp-card {
    padding-bottom: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}