/* 环节三 */
.topbar { position: absolute; left: 24px; right: 24px; top: 18px; display: flex; gap: 14px; align-items: center; z-index: 40; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar .grow { flex: 1; }

.p1 { left: 24px; top: 92px; width: 270px; height: 132px; display: flex; align-items: center; justify-content: space-around; z-index: 30; }
.p2 { left: 24px; top: 248px; width: 270px; height: 124px; display: grid; place-items: center; z-index: 30; }
.hud.panel { left: 24px; top: 396px; width: 270px; height: 100px; justify-content: center; z-index: 30; }
.hud .cells .cell { width: 26px; height: 56px; }
.play-btn.ready { animation: hint-pulse 1.2s ease-in-out infinite; }

.tray { left: 24px; top: 690px; width: 690px; height: 186px; display: grid; place-items: center; z-index: 30; }
.tray .packs { display: flex; gap: 14px; }

.rec { left: 736px; top: 556px; width: 840px; height: 320px; display: flex; gap: 18px; align-items: center; padding: 14px 18px 14px 22px; z-index: 30; }
.recbox { position: relative; height: 288px; border-radius: 18px; background: #fff; border: 3px solid #cfe7ec; display: grid; justify-items: center; align-content: start; padding-top: 14px; transition: opacity .3s, border-color .3s, background .3s; }
.recbox.locked { opacity: .45; }
#recA { width: 400px; }
#recB { width: 260px; }
.recbox .branch { width: 220px; height: 44px; display: block; }
.recbox .bottom { display: flex; gap: 46px; align-items: flex-end; justify-content: center; min-height: 92px; }
#topWrap { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px; background: #f2fbf6; border: 2px solid #b9e6cb; }
#topWrap .over-cells { position: absolute; left: 100%; top: 6px; margin-left: 6px; animation: shake .4s ease 3; }
#remCells { min-width: 40px; padding: 10px; border-radius: 14px; background: #f2fbf6; border: 2px solid #b9e6cb; min-height: 88px; }
.slot { min-width: 120px; min-height: 88px; padding: 10px; border-radius: 14px; border: 3px dashed #7fb4c0; background: rgba(204, 250, 255, .5); display: grid; place-items: center; transition: transform .2s, background .2s; }
.slot.hot { transform: scale(1.08); background: #d9f7e4; border-color: var(--green); }
.slot.filled { border-style: solid; border-color: #b9e6cb; background: #f2fbf6; }
.cell.blink { animation: blink-cell .8s ease-in-out 3; }
@keyframes blink-cell { 50% { background: #ffe9a8; border-color: #e0a100; } }
#recA.bad { border-color: var(--red); background: #fff2f0; }
#recA.short { border-color: #e0a100; }
#recA.ok { border-color: var(--green); background: #eefcf3; }

.nbox { width: 78px; height: 70px; border-radius: 16px; border: 3px dashed #7fb4c0; background: #f6fdff; font: 900 44px var(--font); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.nbox.set { border-style: solid; border-color: #9fcfda; }
.nbox.focus { border: 4px solid var(--orange); box-shadow: 0 0 0 5px rgba(224, 122, 63, .25); }
#recB .bottom { gap: 40px; min-height: 76px; align-items: center; }
.digits { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 14px; width: 236px; }
.digits .key { height: 50px; font-size: 26px; border-radius: 12px; }
.rec .submit-btn { flex: none; }

.finish-name { margin: 0; font-size: 40px; }