/* Class hub (07.10.2026): create a class, follow its game timeline, start a game. */
#hub {
  --hub-gold: #e7c98a;
  --hub-gold-deep: #b98f4e;
  --hub-ink: #0d1c25;
  --hub-text: #e9e3d3;
  --hub-muted: #a9bbbd;
  --hub-line: #7f969f55;
  position: relative;
  isolation: isolate;
  display: block;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 85% -10%, #3d5a6466, transparent 70%),
    radial-gradient(ellipse 60% 45% at 10% 110%, #2b204a55, transparent 70%),
    linear-gradient(160deg, #132731, #0b1922 70%);
}
#hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #f2dca9aa, transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 14%, #bfe3ffaa, transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 62%, #f2dca988, transparent 60%),
    radial-gradient(1.1px 1.1px at 32% 78%, #bfe3ff88, transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 48%, #f2dca966, transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 30%, #ffffff77, transparent 60%);
  animation: hub-motes 14s ease-in-out infinite alternate;
}
@keyframes hub-motes { from { transform: translateY(0); opacity: .55; } to { transform: translateY(-14px); opacity: 1; } }

/* Views */
#hub .hub-view {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  gap: 16px;
  padding: 30px 36px 26px;
  overflow: auto;
  scrollbar-width: thin;
  color: var(--hub-text);
}
#hub[data-view='home'] .hub-home,
#hub[data-view='create'] .hub-create,
#hub[data-view='class'] .hub-class,
#hub[data-view='goal'] .hub-goal,
#hub[data-view='settings'] .hub-settings,
#hub[data-view='quick'] .hub-quick-view { display: flex; animation: hub-enter .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hub-enter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

#hub .hub-eyebrow { margin: 0; color: var(--hub-gold); font: 650 11px/1.3 system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
#hub .hub-title { margin: 0; color: #f6e8c8; font: 500 clamp(28px, 2.7vw, 40px)/1.1 Georgia, serif; text-shadow: 0 2px 18px #e7c98a33; }
#hub .hub-view > .hub-back + .hub-title,
#hub .hub-view > .hub-back + .hub-eyebrow,
#hub .hub-view > .hub-back + .class-head { margin-top: -2px; }

/* Buttons */
#hub .hub-primary {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  min-height: 56px;
  padding: 0 34px;
  border: 1px solid #f7e2b0;
  border-radius: 999px;
  background: linear-gradient(165deg, #f8e7bd, #ddbb79 62%, #b88d4c);
  color: var(--hub-ink);
  font: 700 17px/1 system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 0 0 0 #e7c98a00, 0 8px 22px #0007, inset 0 1px 0 #fff8e0;
  transition: transform .18s ease, box-shadow .25s ease, filter .2s;
}
#hub .hub-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, #fff9 50%, transparent 65%);
  transform: translateX(-120%);
  animation: hub-shine 4.5s ease-in-out 1.2s infinite;
}
@keyframes hub-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
#hub .hub-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 0 6px #e7c98a26, 0 12px 28px #0008, inset 0 1px 0 #fff8e0; }
#hub .hub-primary:active:not(:disabled) { transform: translateY(1px); }
#hub .hub-primary:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
#hub .hub-primary:disabled::after { animation: none; }
#hub .hub-primary > span { font-weight: 400; margin-right: 4px; }

#hub .hub-back,
#hub .hub-gear {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #c6b48a55;
  border-radius: 50%;
  background: #0c1d27b3;
  color: var(--hub-gold);
  font: 400 20px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s;
}
#hub .hub-back { flex: none; align-self: flex-start; }
#hub .hub-back:hover { transform: translateX(-3px); background: #1b3340; border-color: var(--hub-gold); }
#hub .hub-gear { position: absolute; top: 22px; right: 24px; z-index: 3; }
#hub .hub-gear svg { width: 24px; height: 24px; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
#hub .hub-gear:hover { background: #1b3340; border-color: var(--hub-gold); }
#hub .hub-gear:hover svg { transform: rotate(90deg); }
#hub[data-view='settings'] .hub-gear { display: none; }

#hub .hub-secondary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
#hub .hub-secondary button {
  width: auto;
  height: 44px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #c6b48a50;
  border-radius: 999px;
  background: #0c1d2799;
  color: #e6dcc3;
  font: 600 14px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
#hub .hub-secondary button.setup-tutorial::after { content: none; }
#hub .classroom-setup-link { display: inline-flex; align-items: center; padding: 11px 16px; border: 1px solid var(--hub-line); border-radius: 8px; color: var(--hub-gold); background: #132932; font: 600 14px system-ui,sans-serif; text-decoration: none; min-height: 44px; box-sizing: border-box; }
#hub .classroom-setup-link:hover { background: #1b3340; border-color: var(--hub-gold); }
#hub .classroom-setup-link:focus-visible { outline: 3px solid var(--hub-gold); outline-offset: 3px; }
#hub[data-empty='true'] .hub-home { justify-content: center; }
#hub[data-empty='true'] .hub-secondary { margin-top: 10px; }
#hub .hub-secondary button:hover { background: #1b3340; border-color: var(--hub-gold); transform: translateY(-1px); }

/* Home */
#hub .class-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
#hub[data-empty='true'] .class-cards { display: none; }
#hub .class-card {
  --accent: #6fc4c8;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 132px;
  padding: 16px 18px;
  border: 1px solid #ffffff1c;
  border-radius: 14px;
  background: linear-gradient(160deg, #1d3743, #10232d);
  color: var(--hub-text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px #0005;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, border-color .22s;
  animation: hub-enter .5s cubic-bezier(.2, .8, .2, 1) both;
}
#hub .class-card:nth-child(2) { animation-delay: .06s; }
#hub .class-card:nth-child(3) { animation-delay: .12s; }
#hub .class-card:nth-child(4) { animation-delay: .18s; }
#hub .class-card:nth-child(n+5) { animation-delay: .24s; }
#hub .class-card[data-year='6'] { --accent: #e7c98a; }
#hub .class-card[data-year='7'] { --accent: #b99cf2; }
#hub .class-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 14px 14px 0 0; background: var(--accent); opacity: .8; }
#hub .class-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 16px 34px #0008, 0 0 24px color-mix(in srgb, var(--accent) 22%, transparent); }
#hub .class-card-year { color: var(--accent); font: 700 11px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
#hub .class-card-name { font: 500 30px/1.05 Georgia, serif; color: #f7ecd2; }
#hub .class-dots { display: flex; gap: 5px; margin-top: auto; }
#hub .class-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff1f; }
#hub .class-dots i[data-state='done'] { background: var(--accent); }
#hub .class-dots i[data-state='next'] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); animation: hub-blink 1.8s ease-in-out infinite; }
@keyframes hub-blink { 50% { opacity: .35; } }
#hub .class-card-next { color: var(--hub-muted); font: 500 12px/1.2 system-ui, sans-serif; }

#hub .hub-steps { display: none; margin: 6px 0 4px; padding: 0; list-style: none; gap: 12px; }
#hub[data-empty='true'] .hub-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#hub .hub-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  background: #0d1f29a8;
  font: 600 15px/1.3 system-ui, sans-serif;
  color: #e6dfcc;
  animation: hub-enter .5s cubic-bezier(.2, .8, .2, 1) both;
}
#hub .hub-steps li:nth-child(2) { animation-delay: .08s; }
#hub .hub-steps li:nth-child(3) { animation-delay: .16s; }
#hub .hub-steps span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hub-gold); color: var(--hub-gold); font: 500 17px/1 Georgia, serif; }

/* Hall of classes: records compare classes, never pupils. */
#hub .hall h3 { margin: 4px 0 8px; color: var(--hub-gold); font: 650 11px/1.3 system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
#hub .hall-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
#hub .hall-record {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center;
  padding: 12px 14px; border: 1px solid #e7c98a33; border-radius: 12px;
  background: linear-gradient(160deg, #e7c98a14, #0d1f29b3);
  animation: hub-enter .5s cubic-bezier(.2, .8, .2, 1) both;
}
#hub .hall-record:nth-child(2) { animation-delay: .05s; } #hub .hall-record:nth-child(3) { animation-delay: .1s; }
#hub .hall-record:nth-child(4) { animation-delay: .15s; } #hub .hall-record:nth-child(5) { animation-delay: .2s; }
#hub .hall-icon { grid-row: 1 / span 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e7c98a22; color: var(--hub-gold); font-size: 16px; }
#hub .hall-value { color: #f6e8c8; font: 600 22px/1 Georgia, serif; }
#hub .hall-label { color: var(--hub-muted); font: 600 11px/1.2 system-ui, sans-serif; letter-spacing: .04em; }
#hub .hall-class { color: var(--hub-gold); font: 700 13px/1.2 system-ui, sans-serif; }

/* Create */
#hub .class-name {
  width: min(420px, 100%);
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid #8aa0a866;
  border-radius: 12px;
  background: #0a1820;
  color: #f6ecd4;
  font: 500 22px/1 Georgia, serif;
  transition: border-color .2s, box-shadow .2s;
}
#hub .class-name::placeholder { color: #8a9ea4; font-size: 18px; }
#hub .class-name:focus { outline: none; border-color: var(--hub-gold); box-shadow: 0 0 0 4px #e7c98a22; }
#hub .year-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#hub .year-card {
  --accent: #6fc4c8;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px 18px;
  border: 1px solid #ffffff1f;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(170deg, #1a323d, #0e2029);
  color: var(--hub-text);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s;
  animation: hub-enter .5s cubic-bezier(.2, .8, .2, 1) both;
}
#hub .year-card:nth-child(2) { --accent: #e7c98a; animation-delay: .06s; }
#hub .year-card:nth-child(3) { --accent: #b99cf2; animation-delay: .12s; }
#hub .year-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 18px 36px #0008; }
#hub .year-card[aria-checked='true'] { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent), 0 18px 40px #0009, 0 0 40px color-mix(in srgb, var(--accent) 30%, transparent); }
#hub .year-card[aria-checked='true']::after { content: "✓"; position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--hub-ink); font: 700 14px/1 system-ui, sans-serif; animation: hub-pop .3s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes hub-pop { from { transform: scale(0); } to { transform: scale(1); } }
#hub .year-big { color: var(--accent); font: 500 clamp(48px, 5vw, 70px)/1 Georgia, serif; text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); }
#hub .year-big sup { font-size: .45em; vertical-align: super; }
#hub .year-label { font: 700 13px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #efe5cc; }
#hub .year-row { display: flex; gap: 5px; margin-top: 2px; }
#hub .year-row b { padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 7px; background: #0a182099; color: #f5ead0; font: 500 16px/1.1 Georgia, serif; }
#hub .year-row b.off { opacity: .3; text-decoration: line-through; text-decoration-color: #ffffff88; }
#hub .year-hint { color: var(--hub-muted); font: 500 12.5px/1.25 system-ui, sans-serif; text-align: center; }

/* Class: timeline */
#hub .class-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-right: 54px; }
#hub .year-badge { padding: 6px 12px; border: 1px solid #e7c98a77; border-radius: 999px; color: var(--hub-gold); font: 700 11px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
#hub .class-score { margin-left: auto; color: #d6dfdc; font: 500 13px/1 system-ui, sans-serif; white-space: pre; }
#hub .timeline {
  --done: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--games, 7), minmax(0, 1fr));
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
#hub .timeline::before,
#hub .timeline::after {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(50% / var(--games, 7));
  height: 4px;
  border-radius: 4px;
}
#hub .timeline::before { right: calc(50% / var(--games, 7)); background: repeating-linear-gradient(90deg, #ffffff2a 0 10px, transparent 10px 16px); }
#hub .timeline::after {
  width: calc((100% - 100% / var(--games, 7)) * var(--done));
  background: linear-gradient(90deg, #b98f4e, #f3dca1);
  box-shadow: 0 0 12px #e7c98a99;
  transition: width .8s cubic-bezier(.2, .8, .2, 1);
  animation: hub-grow 1s cubic-bezier(.2, .8, .2, 1) both .15s;
}
@keyframes hub-grow { from { width: 0; } }
#hub .timeline li { position: relative; z-index: 1; display: flex; justify-content: center; }
#hub .game-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 0 6px;
  border: 0;
  background: none;
  color: var(--hub-text);
  cursor: pointer;
}
#hub .node-orb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid #7d929b88;
  border-radius: 50%;
  background: #0e1f28;
  color: #c4d0cf;
  font: 500 22px/1 Georgia, serif;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s, border-color .25s;
}
#hub .game-node[data-state='done'] .node-orb { border-color: #f1d89c; background: radial-gradient(circle at 35% 30%, #f9e8bc, #c99d58 70%); color: var(--hub-ink); font: 700 22px/1 system-ui, sans-serif; }
#hub .game-node[data-state='next'] .node-orb { border-color: var(--hub-gold); color: #f8ebcc; background: radial-gradient(circle, #3b4b4f, #13252e); animation: hub-pulse 2s ease-in-out infinite; }
#hub .game-node[data-state='locked'] .node-orb { opacity: .7; }
@keyframes hub-pulse { 0%, 100% { box-shadow: 0 0 0 0 #e7c98a66; } 50% { box-shadow: 0 0 0 10px #e7c98a00, 0 0 26px #e7c98a66; } }
#hub .game-node:hover .node-orb { transform: scale(1.1); border-color: var(--hub-gold); }
#hub .game-node[aria-pressed='true'] .node-orb { transform: scale(1.14); box-shadow: 0 0 0 4px #e7c98a44, 0 8px 22px #000a; }
#hub .node-label { font: 650 12px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #cfd8d6; }
#hub .node-sub { font: 500 12px/1 system-ui, sans-serif; color: var(--hub-muted); }
#hub .game-node[aria-pressed='true'] :is(.node-label, .node-sub) { color: var(--hub-gold); }
#hub .game-node::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 5px 9px;
  border-radius: 6px;
  background: #f2e2bc;
  color: var(--hub-ink);
  font: 700 11px/1 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#hub .game-node:hover::after { opacity: 1; transform: translate(-50%, 0); }

#hub .game-detail {
  flex: 0 1 auto;
  min-height: 0;
  padding: 16px 18px;
  border: 1px solid #ffffff17;
  border-radius: 14px;
  background: linear-gradient(170deg, #17303bcc, #0c1c25cc);
  overflow: auto;
  scrollbar-width: thin;
}
#hub .detail-head { margin: 0 0 12px; color: #d3dcda; font: 500 14px/1.3 system-ui, sans-serif; }
#hub .detail-head strong { color: #f6e8c8; font: 500 20px/1 Georgia, serif; }
#hub .detail-head { display: flex; align-items: baseline; gap: 12px; }
#hub .detail-block { color: var(--hub-muted); font: 600 13px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#hub .detail-result { color: var(--hub-gold); font: 600 14px/1 system-ui, sans-serif; }
#hub .timeline-replay {
  min-height: 50px;
  margin: 0 0 14px;
  padding: 10px 22px;
  border: 1px solid var(--hub-gold);
  border-radius: 999px;
  background: #e7c98a1c;
  color: #f6e8c8;
  font: 700 16px/1.3 system-ui, sans-serif;
  cursor: pointer;
}
#hub .timeline-replay:hover { background: #e7c98a35; }
#hub .timeline-replay:focus-visible { outline: 3px solid #f6e8c8; outline-offset: 3px; }
#hub .verb-chips { align-items: center; }
#hub .foundation-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 7px; border-radius: 999px; background: linear-gradient(160deg, #f3dca1, #c99d58); color: var(--hub-ink); font: 700 14px/1 system-ui, sans-serif; box-shadow: 0 0 14px #e7c98a44; }
#hub .foundation-glyph { display: inline-grid; place-items: center; }
#hub .foundation-glyph svg { width: 20px; height: 20px; }
#hub .node-sub .foundation-glyph svg { width: 18px; height: 18px; }
#hub .node-sub { min-height: 18px; display: grid; place-items: center; }
#hub .pack-step { padding: 5px 9px; border: 1px solid #ffffff22; border-radius: 999px; color: var(--hub-muted); font: 600 13px/1 system-ui, sans-serif; }
#hub .chip-plus { color: var(--hub-gold); font: 400 22px/1 Georgia, serif; padding: 0 2px; }
#hub .verb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#hub .verb-chips .verb-chip {
  padding: 5px 11px;
  border: 1px solid #e7c98a40;
  border-radius: 999px;
  background: #e7c98a12;
  color: #f2e7cd;
  font: 500 15px/1.1 Georgia, serif;
  animation: hub-chip .35s cubic-bezier(.2, .8, .2, 1) both;
}
#hub .verb-chips .verb-chip:nth-child(4n+2) { animation-delay: .03s; }
#hub .verb-chips .verb-chip:nth-child(4n+3) { animation-delay: .06s; }
#hub .verb-chips .verb-chip:nth-child(4n) { animation-delay: .09s; }
@keyframes hub-chip { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }

#hub .teacher-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e7c98a55;
  border-left: 4px solid var(--hub-gold);
  border-radius: 12px;
  background: linear-gradient(100deg, #e7c98a1c, #e7c98a08);
}
#hub .note-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #e7c98a26; color: var(--hub-gold); font-size: 19px; }
#hub .teacher-note p { flex: 1; margin: 0; color: #eee5cf; font: 500 15px/1.4 system-ui, sans-serif; }
#hub .note-button {
  flex: none;
  padding: 11px 18px;
  border: 1px solid var(--hub-gold);
  border-radius: 999px;
  color: var(--hub-gold);
  font: 700 14px/1 system-ui, sans-serif;
  text-decoration: none;
  transition: background .2s, color .2s;
}
#hub .note-button:hover { background: var(--hub-gold); color: var(--hub-ink); }
#hub .hub-class .hub-primary,
#hub .hub-goal .hub-primary,
#hub .hub-create .hub-primary { margin-top: auto; }

/* Goal: each card shows the gap row as it appears in the game. */
#hub .goal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#hub .goal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px 18px 16px;
  border: 1px solid #ffffff1f;
  border-radius: 14px;
  background: linear-gradient(170deg, #1a323d, #0e2029);
  color: var(--hub-text);
  text-align: left;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s, box-shadow .22s;
  animation: hub-enter .45s cubic-bezier(.2, .8, .2, 1) both;
}
#hub .goal-card:nth-child(2) { animation-delay: .05s; }
#hub .goal-card:nth-child(3) { animation-delay: .1s; }
#hub .goal-card:nth-child(4) { animation-delay: .15s; }
#hub .goal-card > strong { font: 600 17px/1.2 system-ui, sans-serif; color: #efe6cf; }
#hub .goal-card:hover { transform: translateY(-4px); border-color: #e7c98a88; }
#hub .goal-card[aria-checked='true'] { border-color: var(--hub-gold); background: radial-gradient(circle at 80% 0, #e7c98a2e, transparent 70%), linear-gradient(170deg, #233d47, #10232d); box-shadow: 0 0 0 3px #e7c98a44, 0 16px 34px #0008; }
#hub .goal-card[aria-checked='true'] > strong { color: var(--hub-gold); }
#hub .goal-card[aria-checked='true']::after { content: "✓"; position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hub-gold); color: var(--hub-ink); font: 700 13px/1 system-ui, sans-serif; animation: hub-pop .3s cubic-bezier(.3, 1.6, .5, 1) both; }
#hub .gap-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#hub .gap-cell {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px 10px;
  border: 1px solid #ffffff14;
  border-radius: 9px;
  background: #0a1820aa;
}
#hub .gap-cell small { font: 650 10.5px/1 system-ui, sans-serif; letter-spacing: .03em; color: #a8b8b8; white-space: nowrap; }
#hub .gap-word, #hub .gap-mark { grid-area: 2 / 1; font: 500 clamp(19px, 1.7vw, 25px)/1.1 Georgia, serif; font-style: normal; }
#hub .gap-word { color: #f4ead2; }
#hub .gap-mark { color: #ffe7a6; opacity: 0; text-shadow: 0 0 14px #e7c98acc; }
#hub .gap-cell[data-state='gap'] { border: 1.5px dashed #e7c98aaa; background: #e7c98a14; }
#hub .gap-cell[data-state='gap'] small { color: var(--hub-gold); }
#hub .gap-row[data-gaps='1'] .gap-cell[data-state='gap'] .gap-word { opacity: 0; }
#hub .gap-row[data-gaps='1'] .gap-cell[data-state='gap'] .gap-mark { opacity: 1; }
#hub .gap-cell[data-state='off'] { opacity: .3; }
/* Any gap: the question mark wanders from column to column. */
#hub .gap-row[data-gaps='2'] .gap-cell[data-state='gap'] .gap-word { animation: gap-word-2 3.2s infinite; animation-delay: calc(var(--slot, 0) * 1.6s); }
#hub .gap-row[data-gaps='2'] .gap-cell[data-state='gap'] .gap-mark { animation: gap-mark-2 3.2s infinite; animation-delay: calc(var(--slot, 0) * 1.6s); }
#hub .gap-row[data-gaps='3'] .gap-cell[data-state='gap'] .gap-word { animation: gap-word-3 4.8s infinite; animation-delay: calc(var(--slot, 0) * 1.6s); }
#hub .gap-row[data-gaps='3'] .gap-cell[data-state='gap'] .gap-mark { animation: gap-mark-3 4.8s infinite; animation-delay: calc(var(--slot, 0) * 1.6s); }
@keyframes gap-word-2 { 0%, 46% { opacity: 0; } 54%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gap-mark-2 { 0%, 46% { opacity: 1; } 54%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gap-word-3 { 0%, 30% { opacity: 0; } 36%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gap-mark-3 { 0%, 30% { opacity: 1; } 36%, 96% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #hub .gap-row:not([data-gaps='1']) .gap-cell[data-state='gap'] .gap-word { opacity: 0; }
  #hub .gap-row:not([data-gaps='1']) .gap-cell[data-state='gap'] .gap-mark { opacity: 1; }
}

/* Home actions: create a class or start a quick game. */
#hub .hub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#hub .hub-quick {
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid #e7c98a99;
  border-radius: 999px;
  background: #0c1d27b3;
  color: var(--hub-gold);
  font: 700 16px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}
#hub .hub-quick:hover { background: #1b3340; transform: translateY(-2px); box-shadow: 0 0 0 5px #e7c98a1f; }
#hub .hub-quick span { margin-right: 4px; }

/* Quick game: the digital verb list. */
#hub .hub-quick-view { gap: 10px; }
#hub .quick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-right: 54px; }
#hub .quick-tabs { display: inline-flex; padding: 3px; border: 1px solid #ffffff1f; border-radius: 999px; background: #0a1820; }
#hub .quick-tabs button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--hub-muted); font: 650 13px/1 system-ui, sans-serif; cursor: pointer; }
#hub .quick-tabs button[aria-selected='true'] { background: var(--hub-gold); color: var(--hub-ink); }
#hub .quick-tools { display: flex; align-items: center; gap: 8px; }
#hub .quick-tools strong { margin-right: auto; color: #f3e6c6; font: 600 15px/1 system-ui, sans-serif; }
#hub .quick-tools button { min-height: 32px; padding: 0 14px; border: 1px solid #c6b48a55; border-radius: 999px; background: #0c1d27b3; color: #e6dcc3; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; }
#hub .quick-tools button:hover { border-color: var(--hub-gold); }
#hub .quick-list { flex: 1 1 auto; min-height: 120px; overflow: auto; padding: 2px 6px 6px 0; scrollbar-width: thin; }
#hub .quick-block { margin-bottom: 12px; }
#hub .quick-block-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  margin-bottom: 6px; padding: 6px 10px; border: 0; border-radius: 8px;
  background: #ffffff0d; color: #efe5cc; cursor: pointer; text-align: left;
}
#hub .quick-block-head:hover { background: #ffffff17; }
#hub .quick-block-name { display: inline-flex; align-items: center; gap: 6px; font: 600 16px/1 Georgia, serif; }
#hub .quick-block-name .foundation-glyph svg { width: 18px; height: 18px; color: var(--hub-gold); }
#hub .quick-block-count { color: var(--hub-muted); font: 600 12px/1 system-ui, sans-serif; }
#hub .quick-block-head[data-state='all'] .quick-block-count { color: var(--hub-gold); }
#hub .quick-verbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
#hub .quick-verb {
  display: flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 38px;
  padding: 6px 10px; border: 1px solid #ffffff14; border-radius: 8px;
  background: #0a1820; color: #7f9196; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
#hub .quick-verb b { flex: none; font: 500 17px/1.1 Georgia, serif; white-space: nowrap; }
#hub .quick-verb span { overflow: hidden; font: 500 12px/1.1 system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
#hub .quick-verb[aria-pressed='true'] { border-color: #e7c98a99; background: linear-gradient(170deg, #e7c98a2b, #e7c98a12); color: #f6ecd2; }
#hub .quick-verb[aria-pressed='true'] span { color: #d8c9a2; }
#hub .quick-verb:hover { border-color: var(--hub-gold); }
#hub .quick-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 10px; border-top: 1px solid var(--hub-line); }
#hub .quick-goals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#hub .quick-goals-label { margin-right: 2px; color: var(--hub-muted); font: 650 11px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
#hub .quick-goal { min-height: 36px; padding: 0 12px; border: 1.5px dashed #ffffff2a; border-radius: 8px; background: #0a1820; color: #c8d3d2; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; }
#hub .quick-goal[aria-checked='true'] { border-color: var(--hub-gold); background: #e7c98a1f; color: var(--hub-gold); }
#hub .quick-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px; border: 0; background: none; color: #c8d3d2; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; }
#hub .quick-switch i { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #ffffff24; transition: background .2s; }
#hub .quick-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #dfe6e4; transition: transform .2s; }
#hub .quick-switch[aria-checked='true'] i { background: var(--hub-gold); }
#hub .quick-switch[aria-checked='true'] i::after { transform: translateX(16px); background: var(--hub-ink); }
#hub .quick-foot .hub-primary { margin-left: auto; min-height: 50px; }

/* Settings */
#hub .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
#hub .settings-grid label { display: flex; flex-direction: column; gap: 7px; color: #cbd8d8; font: 600 13px/1.2 system-ui, sans-serif; }
#hub .settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#hub .settings-row :is(button, a, .file-button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #c6b48a55;
  border-radius: 999px;
  background: #0c1d27b3;
  color: #e6dcc3;
  font: 600 14px/1 system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
#hub .settings-row :is(button, a, .file-button):hover { background: #1b3340; border-color: var(--hub-gold); }
#hub .settings-row .file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#hub .settings-row .file-button:focus-within { outline: 3px solid #f2d28a; outline-offset: 3px; }
#hub #deleteClassButton { border-color: #e08a7a77; color: #f3b7a9; }
#hub #deleteClassButton:hover { background: #5a201a; border-color: #f3b7a9; }
#hub .materials-row::before { content: "Print"; margin-right: 4px; color: var(--hub-muted); font: 650 11px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
#hub .game-guide { margin: 0; border-top: 1px solid var(--hub-line); padding-top: 6px; }
#hub .game-guide p { color: #c9d4d3; font: 13px/1.5 system-ui, sans-serif; }
#hub .setup-error { position: absolute; left: 36px; right: 36px; bottom: 90px; z-index: 4; }

/* The camp shows the expedition of the open class only. */
#setupForm[data-hub] :is(#campLesson, .camp-totals, .camp-next:not(.camp-rift)) { display: none !important; }
#setupForm:is([data-hub='home'], [data-hub='create'], [data-hub='settings'], [data-hub='quick'], [data-hub='finale']) :is(#campProgress, #campTrophies) { display: none !important; }

@media (max-height: 680px) {
  #hub .hub-view { gap: 11px; padding: 20px 28px 18px; }
  #hub .hub-gear { top: 16px; right: 18px; }
  #hub .hub-title { font-size: 28px; }
  #hub .hub-primary { min-height: 50px; }
  #hub .node-orb { width: 46px; height: 46px; font-size: 19px; }
  #hub .timeline::before, #hub .timeline::after { top: 21px; }
  #hub .timeline { margin-top: 4px; }
  #hub .year-card { padding: 16px 10px 14px; gap: 6px; }
  #hub .year-big { font-size: 50px; }
  #hub .goal-card { padding: 12px 14px; gap: 10px; }
  #hub .class-card { min-height: 116px; }
  #hub .teacher-note { padding: 10px 14px; }
  #hub .game-detail { padding: 12px 14px; }
  #hub .verb-chips .verb-chip { padding: 4px 9px; font-size: 14px; }
}
@media (max-width: 760px) {
  #hub .hub-view { padding: 22px 18px; }
  #hub .year-cards, #hub[data-empty='true'] .hub-steps, #hub .settings-grid { grid-template-columns: 1fr; }
  #hub .teacher-note { flex-wrap: wrap; }
  #hub .node-orb { width: 40px; height: 40px; font-size: 16px; }
  #hub .timeline::before, #hub .timeline::after { top: 18px; }
  #hub .node-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #hub *, #hub *::before, #hub *::after, #hub::before { animation: none !important; transition: none !important; }
}

/* Rivalry bar (07.10.2026): who leads the expedition, between games. */
.rivalry { --share: .5; --moon: #5aa8ff; --dawn: #ff7a4d; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 14px; padding: 12px 16px; border: 1px solid #ffffff1a; border-radius: 14px; background: linear-gradient(90deg, #11305080, #0c1c25cc 40% 60%, #4a1d1280); }
.rivalry .rv-side { display: flex; align-items: center; gap: 10px; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), filter .4s; }
.rivalry .rv-b { flex-direction: row-reverse; text-align: right; grid-column: 3; grid-row: 1; }
.rivalry .rv-side img { width: 46px; height: 50px; object-fit: contain; filter: drop-shadow(0 4px 8px #0008); }
.rivalry .rv-text { display: grid; gap: 2px; }
.rivalry .rv-name { color: #c9d4d3; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.rivalry .rv-total { color: #f6ecd2; font: 600 26px/1 Georgia, serif; }
.rivalry .rv-gain { color: #9fb2b4; font: 600 11px/1 system-ui, sans-serif; }
.rivalry .rv-gain:empty { display: none; }
.rivalry .rv-side[data-lead='true'] { transform: scale(1.08); }
.rivalry .rv-side[data-lead='true'] img { filter: drop-shadow(0 0 14px #ffe28acc) drop-shadow(0 4px 8px #0008); animation: rv-crest 2.4s ease-in-out infinite; }
.rivalry .rv-a[data-lead='true'] .rv-total { color: #bfe0ff; text-shadow: 0 0 14px #5aa8ff99; }
.rivalry .rv-b[data-lead='true'] .rv-total { color: #ffd2bf; text-shadow: 0 0 14px #ff7a4d99; }
.rivalry .rv-side[data-lead='true'] .rv-name::after { content: ' ♛'; color: #ffe28a; }
@keyframes rv-crest { 50% { transform: translateY(-3px); } }
.rivalry .rv-track { position: relative; grid-column: 2; grid-row: 1; height: 14px; border-radius: 999px; background: #0008; overflow: visible; box-shadow: inset 0 0 0 1px #ffffff1a; }
.rivalry .rv-fill-a, .rivalry .rv-fill-b { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.rivalry .rv-fill-a { left: 0; width: calc(var(--share) * 100%); background: linear-gradient(90deg, #1f5fa8, var(--moon)); box-shadow: 0 0 12px #5aa8ff66; }
.rivalry .rv-fill-b { right: 0; width: calc((1 - var(--share)) * 100%); background: linear-gradient(270deg, #a8331f, var(--dawn)); box-shadow: 0 0 12px #ff7a4d66; }
.rivalry .rv-seam { position: absolute; top: 50%; left: calc(var(--share) * 100%); width: 22px; height: 22px; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid #fff3cf; border-radius: 4px; background: #e7c98a; box-shadow: 0 0 16px #ffe28a, 0 0 30px #ffe28a88; transition: left 1s cubic-bezier(.2, .8, .2, 1); animation: rv-seam 1.6s ease-in-out infinite; }
@keyframes rv-seam { 50% { box-shadow: 0 0 22px #ffe28a, 0 0 44px #ffe28aaa; } }
.rivalry .rv-caption { grid-column: 1 / -1; margin: 0; text-align: center; color: #f0e2bd; font: 600 14px/1.2 system-ui, sans-serif; letter-spacing: .04em; }
.rivalry[data-lead='A'] .rv-caption { color: #bfe0ff; }
.rivalry[data-lead='B'] .rv-caption { color: #ffd2bf; }
.final-rivalry { margin: 10px 0 4px; }
/* Result window (07.10.2026): the big numbers show this game; the bar only shows the expedition total and lead. */
.final-rivalry .rv-name, .final-rivalry .rv-gain { display: none; }
.race-awards .award-row[data-award='echo'], .race-awards .award-row[data-award='powers'] { display: none; }
@media (prefers-reduced-motion: reduce) { .rivalry *, .rivalry *::before { animation: none !important; transition: none !important; } }
#hub .hub-class .rivalry { padding: 8px 14px; }
@media (max-height: 680px) { #hub .hub-class .rivalry .rv-side img { width: 34px; height: 38px; } #hub .hub-class .rivalry .rv-total { font-size: 20px; } #hub .hub-class .rivalry { gap: 2px 10px; padding: 6px 12px; } }
.rivalry .rv-a { grid-column: 1; grid-row: 1; }
#hub .game-node[data-winner='A'] .node-orb { box-shadow: 0 0 0 3px #5aa8ffaa, 0 0 14px #5aa8ff66; }
#hub .game-node[data-winner='B'] .node-orb { box-shadow: 0 0 0 3px #ff7a4daa, 0 0 14px #ff7a4d66; }
#hub .node-sub[data-score='true'] { color: #e9dfc6; font-weight: 700; }
#hub .game-node[data-winner='A'] .node-sub[data-score='true'] { color: #9fcbff; }
#hub .game-node[data-winner='B'] .node-sub[data-score='true'] { color: #ffb59a; }
/* 07.10.2026 · Tablets in portrait: the board needs landscape, so a full-screen hint asks to turn the device. */
.rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 1100px) {
  .rotate-hint { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 18px;
    background: #0b1420; color: #f3e6c4; text-align: center; padding: 24px; }
  .rotate-hint svg { width: 96px; height: 96px; fill: none; stroke: #ffd36a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .rotate-hint p { margin: 0; font: 600 24px/1.3 system-ui, sans-serif; }
}

/* Free teacher route and optional local groups; existing Rift palette and emblems. */
#hub[data-view='finale'] .hub-finale { display:flex; }
#hub .route-actions { display:flex;flex-wrap:wrap;gap:10px;align-items:center; }
#hub .route-actions button:not(.hub-primary),#hub #teamLists button,#hub #groupChoice button {min-height:44px;padding:9px 15px;border:1px solid #597080;border-radius:10px;background:#182a37;color:#f2f2e5;font:inherit;cursor:pointer;}
#hub .route-actions button:disabled {opacity:.5;cursor:default;}
#hub #teamLists {border-top:1px solid #52616a;padding-top:10px;}
#hub #teamLists summary,#hub #groupChoice summary {cursor:pointer;min-height:36px;}
#hub .team-columns {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#hub .team-list {min-width:0;}
#hub .team-list textarea {width:100%;box-sizing:border-box;background:#12212e;color:#fff;border:1px solid #637789;border-radius:8px;padding:8px;font:inherit;}
#hub .presence-row {display:flex;gap:8px;align-items:center;min-height:40px;}
#hub .presence-row input {width:21px;height:21px;flex:none;}
#hub .presence-row[data-absent='true'] span {color:#a1a5ad;text-decoration:line-through;}
#hub #groupChoice {border:1px solid #597080;background:#142632;border-radius:12px;padding:12px;}
#hub .chosen-group {display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
#hub .chosen-group select,#hub #teamListEditor select {min-height:40px;background:#1d3343;color:#fff;border:1px solid #7a8c99;border-radius:6px;padding:5px;font:inherit;max-width:100%;}
#hub .hub-goal {overflow-y:auto;}
#hub .hub-class {overflow-y:auto;}
#hub .hub-finale .rivalry {margin:10px 0;}
@media(max-width:700px){#hub .team-columns {grid-template-columns:1fr;}}
#routeConfirm {max-width:min(620px,85vw);padding:28px;border:1px solid #8eacbb;border-radius:16px;background:#142632;color:#f5f4e7;font:clamp(18px,1.4vw,25px)/1.5 system-ui;box-shadow:0 18px 90px #000a;}
#routeConfirm::backdrop {background:#040e18ba;}
#routeConfirm .route-actions {display:flex;gap:14px;justify-content:flex-end;}
#routeConfirm button {min-height:48px;padding:10px 22px;background:#24475a;color:#fff;border:1px solid #a7b9b9;border-radius:8px;font:inherit;cursor:pointer;}
#routeConfirm button:focus-visible {outline:3px solid #ffe8a7;outline-offset:4px;}
/* Keep teacher controls reachable above the pause veil. */
.topbar {z-index:9;}
.teacher-menu[open] .teacher-controls {width:min(380px,90vw);max-height:calc(100vh - 60px);overflow-y:auto;}
#currentClassGroup {white-space:normal;line-height:1.45;margin:8px 0;color:#f1ead6;}
/* Touch-only class creation; explicit keyboard stays inside the active form. */
#hub .class-name-field {display:flex;align-items:center;gap:10px;}
#hub .class-name-field .class-name {flex:1;min-width:0;}
#hub #classNameKeyboard {min-height:50px;background:#213846;color:#f7ead0;border:1px solid #b5a576;border-radius:9px;font:600 16px system-ui;padding:8px 14px;cursor:pointer;}
#hub .local-name-keyboard {width:100%;box-sizing:border-box;padding:10px;border:1px solid #849398;border-radius:12px;background:#0c1e29;}
#hub .name-key-row {display:flex;justify-content:center;gap:5px;margin:5px 0;}
#hub .name-key-row button {flex:1;min-width:0;min-height:50px;max-width:68px;padding:5px 0;font:600 25px system-ui;background:#294354;color:#fff7df;border:1px solid #778d99;border-radius:7px;touch-action:manipulation;cursor:pointer;}
#hub .name-key-tools {display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;}
#hub .name-key-tools button {min-height:46px;flex:1;padding:6px 10px;background:#314f5b;color:#fff7df;border:1px solid #a4aa9b;border-radius:7px;font:600 15px system-ui;touch-action:manipulation;cursor:pointer;}
#hub .local-name-keyboard button:focus-visible {outline:3px solid #ffe5a6;outline-offset:2px;}
#hub .hub-create {overflow-y:auto;}
#hub .hub-create[data-name-keyboard='true'] {gap:8px;}
#hub .hub-create[data-name-keyboard='true'] .year-cards {display:none;}
#hub .hub-create[data-name-keyboard='true'] #createClassConfirm {position:sticky;bottom:0;margin-top:6px;flex-shrink:0;}
#hub .team-list[data-name-keyboard='true'] {grid-column:1/-1;}
@media(max-height:750px){#hub .hub-create[data-name-keyboard='true'] .hub-title {font-size:28px;}#hub .hub-create[data-name-keyboard='true'] .name-key-row button {min-height:44px;}}

/* Expedition closeout: a clear destination, with an honest empty state. */
#hub .finale-nav {display:flex;align-items:center;gap:12px;padding-right:48px;flex:none;}
#hub .finale-nav .hub-back {width:44px;height:44px;white-space:nowrap;}
#hub .finale-content {width:100%;max-width:700px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 0;text-align:center;}
#hub .hub-finale .hub-title {font-size:clamp(30px,3vw,46px);line-height:1.12;text-wrap:balance;}
#hub .finale-crests {position:relative;display:flex;align-items:center;justify-content:center;gap:26px;min-height:125px;width:min(420px,100%);flex:none;}
#hub .finale-crests::before {content:'';position:absolute;inset:-18px 2%;background:radial-gradient(ellipse,#d3b57521,transparent 70%);pointer-events:none;}
#hub .finale-crests img {width:90px;height:102px;object-fit:contain;position:relative;filter:drop-shadow(0 4px 14px #0009);}
#hub .finale-rune {color:#e3c88c;font-size:30px;text-shadow:0 0 24px #e7c98a66;}
#hub .finale-crests[data-winner='A'] .finale-house-a,#hub .finale-crests[data-winner='B'] .finale-house-b {width:120px;height:125px;filter:drop-shadow(0 0 22px #e7c98a55);}
#hub .finale-crests[data-winner='A'] .finale-house-b,#hub .finale-crests[data-winner='B'] .finale-house-a {width:68px;height:85px;opacity:.65;}
#hub .finale-teacher-details {width:100%;font:400 14px/1.5 system-ui;color:#bfc9c9;}
#hub .finale-teacher-details summary {padding:8px;cursor:pointer;}
#hub .finale-teacher-details[open] {padding:0 14px 14px;background:#0c1d2780;border:1px solid #b7a67844;border-radius:10px;}
#hub .finale-teacher-details summary:focus-visible {outline:3px solid #e7c98a;outline-offset:3px;}
#hub .finale-teacher-details > .rivalry {margin:16px 0;}
#hub .finale-teacher-details > .finale-records {margin-top:14px;}
#hub .finale-explanation {max-width:530px;margin:0;color:#d4ddda;font:400 17px/1.55 system-ui;text-wrap:pretty;}
#hub .hub-finale .rivalry {width:100%;box-sizing:border-box;margin:5px 0;}
#hub .finale-history {width:100%;padding:14px 0;border-top:1px solid #c6b48a30;border-bottom:1px solid #c6b48a30;}
#hub .finale-history p {margin:0;color:#d9decf;font:500 14px/1.5 system-ui;}
#hub #expeditionFinaleRoute {display:flex;justify-content:center;gap:9px;list-style:none;padding:0;margin:14px 0 0;}
#hub #expeditionFinaleRoute li {display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #8d9b9c55;border-radius:50%;font:600 14px system-ui;color:#8d9b9c;}
#hub #expeditionFinaleRoute li[data-played='true'] {color:#f9e7b9;border-color:#dfc486;background:#b79a4b26;}
#hub .finale-records {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;text-align:left;}
#hub .finale-record {display:grid;gap:6px;padding:13px 16px;background:#0c1d2780;border-left:2px solid #bfa76e;}
#hub .finale-record > span {color:#c9d1cb;font:500 13px/1.3 system-ui;}
#hub .finale-record > strong {color:#f5e5bd;font:500 27px/1 Georgia,serif;}
#hub .finale-record > small {color:#a6b8bc;font:400 12px/1.3 system-ui;}
#hub .finale-actions {display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;}
#hub .finale-review {min-height:50px;padding:0 22px;border:1px solid #b7a67866;border-radius:999px;background:transparent;color:#e6d7b8;font:600 15px system-ui;cursor:pointer;}
#hub .finale-review:focus-visible {outline:3px solid #e7c98a;outline-offset:3px;}
#hub .hub-finale[data-state='empty'] .finale-content {gap:22px;max-width:600px;}
@media(max-height:780px){#hub .finale-content {gap:12px;padding:12px 0;}#hub .finale-crests {min-height:94px;}#hub .finale-crests img {width:70px;height:82px;}#hub .finale-crests[data-winner='A'] .finale-house-a,#hub .finale-crests[data-winner='B'] .finale-house-b {width:85px;height:95px;}}
@media(max-width:700px){#hub .finale-crests {gap:18px;}#hub .finale-records {grid-template-columns:1fr;}#hub .finale-explanation {font-size:16px;}#hub .finale-actions {flex-direction:column;}#hub #expeditionFinaleRoute {flex-wrap:wrap;}}