/* Saboteur — the words and controls that sit over the Phaser scene. The art is web/art.js. */
:where(.sb-root button) { all: unset; box-sizing: border-box; }     /* no weight, so the rules below win */
.sb-root .katex { font-size: 1.05em; }
.sb-root { display: flex; align-items: center; justify-content: center; container-type: size; }
.sb-root:empty { display: none; }
.sb-stage { position: relative; width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }

/* the scoreboard along the top */
.sb-hud {
  box-sizing: border-box; width: 1256px; height: 60px; padding: 0 18px; display: flex !important; align-items: center; gap: 16px;
  color: #eef3f8; background: linear-gradient(#2c1f4e, #171030); border: 3px solid #14202c; border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 5px 0 rgba(10,16,30,.45);
}
.sb-chip {
  flex: none; padding: 5px 11px; color: #5bff7b; background: #07040f; border-radius: 6px;
  font: 700 15px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-shadow: 0 0 8px rgba(91,255,123,.7);
}
.sb-hud-title { flex: none; font-size: 21px; font-weight: 700; color: #ffc53d; }
.sb-hud-prompt { flex: 1; min-width: 0; max-height: 52px; overflow: hidden; font-size: 19px; line-height: 1.15; }

/* the signs */
.sb-sign {
  display: flex !important; flex-direction: column; align-items: stretch; gap: 3px; padding: 14px 12px 14px;
  color: #fff; border-radius: 14px; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,.45);
  transition: transform .12s ease, background .12s ease;
}
.sb-sign:disabled { cursor: default; }
.sb-sign:not(:disabled):hover { transform: translateY(-3px); background: rgba(255,255,255,.1); }
.sb-sign:focus-visible, .sb-girder:focus-visible, .sb-repair:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sb-num {
  align-self: center; flex: none; min-width: 26px; padding: 2px 6px; text-align: center; color: #14202c; background: #fff;
  border-radius: 13px; font-size: 15px; font-weight: 800; text-shadow: none;
}
.sb-sign-text { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0 .28em; text-align: center; font-weight: 600; line-height: 1.16; }
.sb-sign.sb-open { color: #14202c; text-shadow: none; }
.sb-sign.sb-checked .sb-sign-text { opacity: .84; }
.sb-stamp {
  flex: none; align-self: center; padding: 2px 8px; color: #14202c; background: #e8eef4; border-radius: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-shadow: none; transform: rotate(-2deg);
}
.sb-sign.sb-repaired .sb-stamp { background: #fff; color: #0c7c5c; }

/* the foreman, on the tug */
.sb-bubble {
  box-sizing: border-box; position: relative; width: 268px; padding: 10px 14px; color: #14202c; font-size: 16px; line-height: 1.22;
  background: #fffdf4; border: 3px solid #14202c; border-radius: 16px; box-shadow: 0 5px 0 rgba(10,16,30,.35);
}
.sb-bubble::after {
  content: ""; position: absolute; left: 96px; bottom: -14px; width: 20px; height: 20px; background: #fffdf4;
  border-right: 3px solid #14202c; border-bottom: 3px solid #14202c; transform: rotate(45deg) skew(12deg, 12deg);
}
.sb-bubble-ask { font-weight: 800; color: #c2410c; margin-bottom: 3px; }
.sb-bubble-ask:last-child { margin-bottom: 0; }

/* the answers, painted on the girders */
.sb-girder {
  display: flex !important; align-items: center; justify-content: center; box-sizing: border-box;
  width: 268px; height: 56px; padding: 2px 8px; color: #14202c; text-align: center; cursor: pointer; border-radius: 6px;
}
.sb-girder-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .26em; width: 100%; max-height: 100%; overflow: hidden; font-weight: 700; line-height: 1.1; }
.sb-root .sb-fill { display: flex !important; flex-direction: row; align-items: center; gap: 14px; width: 576px; height: 96px; color: #14202c; font-size: 20px; font-weight: 700; }
.sb-fill-line { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; text-align: center; line-height: 1.15; }
.sb-input {
  box-sizing: border-box; width: 130px; padding: 4px 8px; color: #14202c; background: #fff; border: 3px solid #14202c; border-radius: 7px;
  font: inherit; text-align: center; outline: none; box-shadow: inset 0 3px 0 rgba(20,32,44,.14);
}
.sb-input:focus { border-color: #c2410c; }
.sb-root .sb-repair {
  flex: none; width: auto; margin: 0; padding: 9px 20px; color: #14202c; background: linear-gradient(#7dffa1, #1fc46b); border: 3px solid #14202c; border-radius: 20px;
  font-size: 16px; font-weight: 800; letter-spacing: .08em; cursor: pointer; box-shadow: 0 4px 0 #14202c;
}
.sb-root .sb-repair:hover { filter: brightness(1.08); }
.sb-root .sb-repair:active { transform: translateY(3px); box-shadow: 0 1px 0 #14202c; }
@media (prefers-reduced-motion: reduce) { .sb-sign { transition: none; } }

/* the teacher panel's preview of a puzzle — it sits on the panel's page, so it takes the page's colours */
.sb-pv-prompt { margin-bottom: 8px; font-weight: 600; }
.sb-pv-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sb-pv-section { display: grid; gap: 2px; }
.sb-pv-fix { padding-left: 16px; border-left: 3px solid #f09b16; }
.sb-pv-muted { opacity: .72; font-size: .92em; }
.sb-pv-tag { padding: 1px 7px; border-radius: 9px; font-size: .78em; font-weight: 700; color: #14202c; }
.sb-pv-broken { background: #ffc53d; }
.sb-pv-trap { background: #8fd6c2; }