#app { height: 100%; display: flex; flex-direction: column; }
.topline { height: 32px; line-height: 32px; text-align: center; font-size: 16px; color: var(--mute); flex: none; }
#stage { flex: 1; min-height: 0; position: relative; }
.center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.center h1 { font-size: 54px; margin: 0 0 20px; }
.center p { font-size: 34px; margin: 0; color: var(--mute); }
.entry input {
  width: 260px; font-size: 48px; text-align: center; padding: 10px; margin: 28px 0 20px;
  border: 3px solid var(--line); border-radius: 14px; background: #fff; -webkit-user-select: text; user-select: text;
}
.entry input:focus { outline: 0; border-color: var(--blue); }
.entry .msg { min-height: 40px; font-size: 24px; color: var(--red); margin-bottom: 16px; max-width: 80%; }

/* 阶段4 s5 */
.s5 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; padding: 0 16px 12px; }
.s5-art { flex: 1; min-width: 0; height: 100%; position: relative; }
.s5-side { width: 400px; flex: none; display: flex; flex-direction: column; justify-content: center; }
.s5-hint { font-size: 28px; font-weight: bold; line-height: 1.4; color: #B71C1C; background: #FFF3CD; border-radius: 12px; padding: 10px 16px; }
.s5-rows { display: flex; flex-direction: column; }
.s5-row { display: flex; align-items: center; background: #fff; border-radius: 14px; padding: 8px 14px; }
.s5-no { width: 44px; font-size: 46px; font-weight: bold; text-align: center; }
.s5-sw { width: 130px; height: 70px; border: 4px solid #999; border-radius: 12px; }
.s5-sw:active { transform: scale(.96); }
.s5-name { font-size: 24px; color: var(--mute); }
.s5-reset { font-size: 24px; padding: 12px 16px; }
.s5-pickbg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 20; }
.s5-pick { background: #fff; border-radius: 18px; padding: 20px 28px; text-align: center; }
.s5-picktitle { font-size: 28px; margin-bottom: 14px; }
.s5-chips { display: grid; grid-template-columns: repeat(5, 76px); gap: 12px; justify-content: center; }
.s5-chip { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #bbb; padding: 0; }
.s5-chip.on { border: 6px solid #222; }
.s5-own { display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 18px 0 14px; }
.s5-own input { width: 90px; height: 50px; padding: 0; border: 2px solid #bbb; background: #fff; }

/* 阶段2 s2 s3 */
.bw { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.bw-hint { flex: none; font-size: 38px; font-weight: bold; line-height: 1.2; padding: 4px 20px 6px; text-align: center; }
.bw-board { flex: 1; min-height: 0; width: 100%; }
.bw-code { flex: none; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; font-weight: bold; line-height: 1.15; padding: 8px 0 14px; letter-spacing: 0; }
.bw-d { display: inline-block; border-bottom: 6px solid transparent; border-radius: 4px; }
.bw-d.ul { border-bottom-color: #1E88E5; }
.bw-d.flash { animation: bwflash .8s ease-out; }
@keyframes bwflash { 0% { background: #FFC107; } 60% { background: #FFE082; } 100% { background: rgba(255,224,130,0); } }

/* 阶段3 s4 */
.s4 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.s4-hint { flex: none; font-size: 44px; font-weight: bold; line-height: 1.2; padding: 4px 20px 6px; }
.s4-board { flex: 1; min-height: 0; width: 100%; }
.s4-code { flex: none; font-family: Menlo, Consolas, "Courier New", monospace; font-size: 22px; color: var(--mute); padding: 8px 0 12px; letter-spacing: 1px; }

/* Opus：flex 的 gap 要 Chrome 84+，为兼容 Chrome 80 改用相邻元素外边距 */
.s5 > * + * { margin-left: 20px; }
.s5-side > * + * { margin-top: 14px; }
.s5-rows > * + * { margin-top: 10px; }
.s5-row > * + * { margin-left: 14px; }
.s5-own > * + * { margin-left: 10px; }
.s5 > .s5-pickbg { margin-left: 0; }
.s5-own input { margin-left: 10px; }