:root {
    color-scheme: dark;
    --pulse-bg: #140d0d;
    --pulse-surface: rgba(48, 30, 27, .88);
    --pulse-surface-strong: rgba(58, 35, 31, .97);
    --pulse-border: rgba(255, 230, 207, .12);
    --pulse-text: #fff5e9;
    --pulse-muted: #cdb4a5;
    --pulse-soft: #f4dfcf;
    --pulse-green: #91d2aa;
    --pulse-green-strong: #65b98b;
    --pulse-amber: #e8b97a;
    --pulse-blue: #d6a092;
    --pulse-danger: #f08b8e;
    --pulse-gold: #e7bd7c;
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--pulse-bg);
}

body {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--pulse-text);
    -webkit-font-smoothing: antialiased;
    user-select: none;
    touch-action: manipulation;
}

button,
input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.terminal-shell {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 34%, rgba(232, 185, 122, .13), transparent 24%),
        radial-gradient(circle at 16% 12%, rgba(190, 103, 82, .13), transparent 27%),
        radial-gradient(circle at 88% 18%, rgba(145, 210, 170, .07), transparent 25%),
        linear-gradient(145deg, #1b1110 0%, #100a0a 64%, #170e0d 100%);
}

.terminal-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 80%);
}

.terminal-topbar,
.terminal-statusbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 34px;
}

.terminal-topbar {
    border-bottom: 1px solid rgba(255,255,255,.055);
    background: linear-gradient(to bottom, rgba(30, 17, 15, .88), rgba(30, 17, 15, .30));
}

.venue-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.venue-brand-logo {
    display: block;
    width: auto;
    height: 58px;
    max-width: min(28vw, 260px);
    object-fit: contain;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.22));
}

.terminal-greeting {
    margin: 0 0 10px;
    color: var(--pulse-soft);
    font-size: clamp(15px, 1.8vw, 22px);
    font-weight: 600;
    letter-spacing: -.02em;
}

.terminal-quote-card {
    position: relative;
    width: min(620px, 78vw);
    margin: 26px 0 0;
    padding: 16px 22px 15px;
    border: 1px solid rgba(231, 189, 124, .16);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(231, 189, 124, .075), rgba(190, 103, 82, .045));
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    text-align: center;
}

.terminal-quote-label {
    display: block;
    margin-bottom: 7px;
    color: var(--pulse-gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.terminal-quote-card blockquote {
    margin: 0;
    color: var(--pulse-soft);
    font-size: clamp(12px, 1.2vw, 15px);
    font-weight: 560;
    line-height: 1.45;
    letter-spacing: -.01em;
}

.terminal-quote-card blockquote::before { content: "“"; color: var(--pulse-gold); }
.terminal-quote-card blockquote::after { content: "”"; color: var(--pulse-gold); }

.terminal-quote-card figcaption {
    margin-top: 7px;
    color: var(--pulse-muted);
    font-size: 10px;
    font-weight: 650;
}

.terminal-clock-wrap {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-variant-numeric: tabular-nums;
}

.terminal-date {
    color: var(--pulse-muted);
    font-size: 13px;
    font-weight: 600;
}

.terminal-clock {
    font-size: 25px;
    letter-spacing: -.04em;
}

.terminal-stage {
    position: relative;
    z-index: 2;
    min-height: 0;
}

.terminal-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/branding/lepommier-logo.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(46vw, 620px);
    opacity: .075;
    filter: saturate(.75) brightness(1.08) blur(.2px);
}

.terminal-stage > * {
    position: relative;
    z-index: 1;
}

.terminal-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px clamp(26px, 6vw, 90px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.992);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.terminal-view-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.fingerprint-orbit {
    position: relative;
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
}

.fingerprint-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(70, 229, 164, .17);
    border-radius: 50%;
    animation: terminal-breathe 3.2s ease-in-out infinite;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.fingerprint-ring-two {
    inset: 18px;
    border-color: rgba(70, 229, 164, .12);
    animation-delay: -.7s;
}

.fingerprint-core {
    position: relative;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    border-radius: 38px;
    border: 1px solid rgba(232, 185, 122, .24);
    background: linear-gradient(145deg, rgba(88, 51, 39, .92), rgba(35, 20, 19, .96));
    box-shadow: 0 24px 80px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.05), 0 0 46px rgba(232, 185, 122, .09);
    isolation: isolate;
}

/* Paint the busy glow once on its own layer and animate only compositor-friendly
   opacity/transform. Animating box-shadow on the Pi 3 forced a full repaint every frame. */
.fingerprint-core::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 0 55px rgba(70,229,164,.26);
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    will-change: transform, opacity;
}

.fingerprint-core svg {
    width: 73px;
    height: 73px;
    fill: none;
    stroke: #f0c989;
    stroke-width: 2.15;
    stroke-linecap: round;
    opacity: .92;
    filter: drop-shadow(0 0 10px rgba(232, 185, 122, .16));
}

.idle-copy,
.terminal-warning-copy {
    max-width: 760px;
    text-align: center;
}

.terminal-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--pulse-gold);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.idle-copy h1,
.staff-identity h1,
#resultView h1,
#errorView h1 {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.04;
    letter-spacing: -.055em;
    font-weight: 730;
}

.idle-copy p,
#resultView p,
#errorView p {
    max-width: 680px;
    margin: 16px auto 0;
    color: var(--pulse-muted);
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.6;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pulse-green);
    box-shadow: 0 0 12px rgba(70,229,164,.55);
}

.terminal-warning-icon {
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    margin-bottom: 24px;
    border-radius: 30px;
    border: 1px solid rgba(255, 198, 109, .2);
    background: rgba(255, 198, 109, .08);
    color: var(--pulse-amber);
    font-size: 44px;
    font-weight: 650;
}

.terminal-warning-copy .terminal-kicker { color: var(--pulse-amber); }

#staffView {
    width: min(980px, calc(100% - 48px));
    height: auto;
    max-height: calc(100% - 40px);
    inset: 50% auto auto 50%;
    transform: translate(-50%, calc(-50% + 12px)) scale(.992);
    align-items: stretch;
    justify-content: flex-start;
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid var(--pulse-border);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(55, 34, 30, .98), rgba(19, 12, 12, .995));
    box-shadow: 0 35px 120px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04);
    overflow-y: auto;
    scrollbar-width: none;
}

#staffView::-webkit-scrollbar { display:none; }

#staffView.terminal-view-active { transform: translate(-50%, -50%) scale(1); }

.terminal-close {
    position: absolute;
    top: 20px;
    right: 22px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--pulse-border);
    border-radius: 15px;
    color: var(--pulse-soft);
    background: rgba(255,255,255,.035);
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.staff-identity {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-right: 55px;
}

.staff-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border: 1px solid rgba(124,229,176,.22);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(216, 189, 130, .14), rgba(117, 214, 168, .10));
    color: #eef5ed;
    font-size: 26px;
    font-weight: 760;
    letter-spacing: -.04em;
}

.staff-identity h1 { font-size: clamp(29px, 3.6vw, 47px); }
.staff-identity p { margin: 7px 0 0; color: var(--pulse-muted); font-size: 15px; }

.staff-welcome-caption {
    margin: 0 0 6px;
    color: var(--pulse-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
}

.staff-guidance-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 16px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.028);
}

.staff-guidance-card strong {
    color: var(--pulse-soft);
    font-size: 15px;
    font-weight: 720;
}

.staff-guidance-card span {
    color: var(--pulse-muted);
    font-size: 12px;
    line-height: 1.5;
}

.staff-state-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 18px 20px;
    border: 1px solid var(--pulse-border);
    border-radius: 20px;
    background: rgba(255,255,255,.025);
}

.state-label-caption,
.staff-last-event span {
    display: block;
    margin-bottom: 5px;
    color: var(--pulse-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.staff-state-card strong { font-size: 20px; }

.state-indicator {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

.state-offshift { color: #c4ceda; background: rgba(196,206,218,.08); }
.state-working { color: #abf3d3; background: rgba(70,229,164,.10); }
.state-onbreak { color: #ffe2ae; background: rgba(255,198,109,.10); }
.state-attention { color: #ffb0b6; background: rgba(255,112,122,.10); }

.staff-rota-card {
    position: relative;
    margin-top: 16px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid rgba(145, 210, 170, .18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(145, 210, 170, .10), transparent 35%),
        linear-gradient(145deg, rgba(145, 210, 170, .075), rgba(255,255,255,.025));
}

.staff-rota-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: var(--pulse-green);
    opacity: .75;
}

.staff-rota-card[data-rota-status="scheduled_later"]::after,
.staff-rota-card[data-rota-status="scheduled_early"]::after,
.staff-rota-card[data-rota-status="next_shift"]::after,
.staff-rota-card[data-rota-status="scheduled_overrun"]::after { background: var(--pulse-amber); }

.staff-rota-card[data-rota-status="working_unscheduled"]::after,
.staff-rota-card[data-rota-status="not_scheduled"]::after,
.staff-rota-card[data-rota-status="rota_unpublished"]::after,
.staff-rota-card[data-rota-status="rota_unavailable"]::after { background: var(--pulse-blue); }

.staff-rota-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.staff-rota-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(145, 210, 170, .20);
    border-radius: 14px;
    color: #bcebd0;
    background: rgba(145, 210, 170, .09);
}

.staff-rota-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.staff-rota-copy { min-width: 0; flex: 1; }

.staff-rota-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.staff-rota-kicker {
    color: var(--pulse-green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.staff-rota-status {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: #c9f4dc;
    background: rgba(145, 210, 170, .10);
    font-size: 9px;
    font-weight: 780;
}

.staff-rota-copy > strong {
    display: block;
    color: var(--pulse-text);
    font-size: 18px;
    line-height: 1.2;
}

.staff-rota-copy > p {
    margin: 5px 0 0;
    color: var(--pulse-muted);
    font-size: 11px;
    line-height: 1.45;
}

.staff-rota-shifts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}

.staff-rota-shifts[hidden] { display: none; }

.staff-rota-shift {
    position: relative;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 14px;
    background: rgba(8, 7, 8, .22);
}

.staff-rota-shift-current,
.staff-rota-shift-ready { border-color: rgba(145, 210, 170, .20); }

.staff-rota-shift-completed {
    border-color: rgba(196, 206, 218, .14);
    opacity: .78;
}

.staff-rota-shift-completed /* Split periods remain separate attendance sessions but share one compact rota tile. */
.staff-rota-shift-split .staff-rota-shift-when {
    display: block;
}

.staff-rota-split-label {
    display: inline-block;
    margin-left: 6px;
    color: var(--pulse-gold) !important;
    font-weight: 800 !important;
    letter-spacing: .015em;
}

.staff-rota-split-periods {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
}

.staff-rota-split-period {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: var(--pulse-soft);
}

.staff-rota-split-period-number {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 5px;
    color: var(--pulse-gold);
    background: rgba(231,189,124,.12);
    font-size: 9px;
    font-weight: 800;
}

.staff-rota-split-period strong {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--pulse-soft);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.staff-rota-split-period-state {
    flex: 0 0 auto;
    color: var(--pulse-muted);
    font-size: 8px;
    font-weight: 700;
}

.staff-rota-split-period-active .staff-rota-split-period-state { color: var(--pulse-green); }
.staff-rota-split-period-done { opacity: .70; }

.staff-rota-split-gap {
    margin-top: 5px;
    color: var(--pulse-gold);
    font-size: 8px;
    font-weight: 650;
    line-height: 1.25;
}

.staff-rota-shift-between { border-color: rgba(231, 189, 124, .24); }

.staff-rota-shift-marker {
    color: #c4ceda;
    background: rgba(196, 206, 218, .08);
}

.staff-rota-shift-when,
.staff-rota-shift-assignment {
    display: flex;
    min-width: 0;
    gap: 4px;
}

.staff-rota-shift-when { align-items: baseline; padding-right: 38px; }
.staff-rota-shift-assignment { flex-direction: column; margin-top: 6px; }

.staff-rota-shift-when strong,
.staff-rota-shift-assignment strong {
    overflow: hidden;
    color: var(--pulse-soft);
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-rota-shift-when span,
.staff-rota-shift-assignment span {
    overflow: hidden;
    color: var(--pulse-muted);
    font-size: 9px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-rota-shift-marker {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--pulse-green);
    background: rgba(145, 210, 170, .09);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.terminal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.terminal-action-button {
    position: relative;
    min-height: 88px;
    padding: 18px 22px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    text-align: left;
    color: var(--pulse-text);
    background: rgba(255,255,255,.035);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.terminal-action-button:hover,
.terminal-action-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(124,229,176,.28);
    background: rgba(124,229,176,.085);
    outline: none;
}

.terminal-action-button:active { transform: scale(.985); }
.terminal-action-button strong { display: block; font-size: 19px; font-weight: 700; }
.terminal-action-button span { display: block; margin-top: 4px; color: var(--pulse-muted); font-size: 12px; }
.terminal-action-primary { border-color: rgba(124,229,176,.22); background: linear-gradient(145deg, rgba(124,229,176,.16), rgba(255,213,155,.06)); }
.terminal-action-unscheduled { border-color: rgba(232,185,122,.20); background: linear-gradient(145deg, rgba(232,185,122,.10), rgba(255,255,255,.025)); }
.terminal-action-unscheduled:hover,
.terminal-action-unscheduled:focus-visible { border-color: rgba(232,185,122,.34); background: rgba(232,185,122,.10); }
.terminal-action-danger { border-color: rgba(255,112,122,.17); }

.staff-last-event {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.065);
}

.staff-last-event strong { color: var(--pulse-soft); font-size: 13px; font-weight: 600; }

.staff-quote-card {
    position: relative;
    margin-top: 22px;
    padding: 18px 20px 16px 58px;
    border: 1px solid rgba(231, 189, 124, .14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(231, 189, 124, .10), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.02));
    box-shadow: inset 0 1px rgba(255,255,255,.03);
}

.staff-quote-card::before {
    content: "“";
    position: absolute;
    top: 10px;
    left: 18px;
    color: rgba(231, 189, 124, .52);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 52px;
    line-height: 1;
}

.staff-quote-label {
    display: block;
    margin-bottom: 8px;
    color: var(--pulse-gold);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.staff-quote-card blockquote {
    margin: 0;
    color: var(--pulse-soft);
    font-size: 17px;
    font-weight: 580;
    line-height: 1.55;
    letter-spacing: -.015em;
}

.staff-quote-card figcaption {
    margin-top: 9px;
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 700;
}

.result-icon {
    display: grid;
    place-items: center;
    width: 106px;
    height: 106px;
    margin-bottom: 25px;
    border-radius: 34px;
    font-size: 48px;
    font-weight: 700;
}

.result-success {
    border: 1px solid rgba(124,229,176,.25);
    color: var(--pulse-green);
    background: linear-gradient(145deg, rgba(124,229,176,.12), rgba(255,213,155,.06));
    box-shadow: 0 20px 65px rgba(124,229,176,.08);
}

.result-error {
    border: 1px solid rgba(255,112,122,.2);
    color: var(--pulse-danger);
    background: rgba(255,112,122,.08);
}

.result-time {
    margin-top: 23px;
    font-size: clamp(30px, 4vw, 48px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.045em;
}

.terminal-secondary-button {
    margin-top: 26px;
    padding: 13px 22px;
    border: 1px solid var(--pulse-border);
    border-radius: 14px;
    color: var(--pulse-text);
    background: rgba(255,255,255,.045);
    font-weight: 700;
    cursor: pointer;
}

.terminal-statusbar {
    min-height: 58px;
    padding-top: 13px;
    padding-bottom: 13px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: var(--pulse-muted);
    background: rgba(27, 16, 14, .68);
    font-size: 11px;
}

.terminal-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 30%;
}


.terminal-network-status { min-width: 0; }
.terminal-network-status #networkLabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wifi-strength {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    width: 18px;
    height: 14px;
    flex: 0 0 18px;
}

.wifi-strength i {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.18);
    transition: background .2s ease, opacity .2s ease;
}

.wifi-strength i:nth-child(1) { height: 4px; }
.wifi-strength i:nth-child(2) { height: 7px; }
.wifi-strength i:nth-child(3) { height: 10px; }
.wifi-strength i:nth-child(4) { height: 13px; }
.wifi-strength[data-level="1"] i:nth-child(-n+1),
.wifi-strength[data-level="2"] i:nth-child(-n+2),
.wifi-strength[data-level="3"] i:nth-child(-n+3),
.wifi-strength[data-level="4"] i:nth-child(-n+4) {
    background: var(--pulse-soft);
}
.wifi-strength[data-level="0"] { opacity: .5; }

.terminal-status-centre {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terminal-status-centre strong { color: var(--pulse-soft); font-weight: 650; }
.terminal-status-right { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.status-dot-offline { background: var(--pulse-danger); box-shadow: 0 0 12px rgba(255,112,122,.35); }

.terminal-busy .fingerprint-core::after { animation: terminal-scan .7s ease-in-out infinite alternate; }
.terminal-busy .fingerprint-ring { animation-duration: 1s; }
.terminal-action-button[disabled] { opacity: .45; pointer-events: none; }

@keyframes terminal-breathe {
    0%, 100% { transform: scale(.96); opacity: .35; }
    50% { transform: scale(1.035); opacity: .92; }
}

@keyframes terminal-scan {
    from { opacity: .22; transform: scale(.94); }
    to { opacity: 1; transform: scale(1.08); }
}

@media (max-height: 690px) {
    .terminal-topbar { padding-top: 16px; padding-bottom: 16px; }
    .fingerprint-orbit { width: 150px; height: 150px; margin-bottom: 18px; }
    .fingerprint-core { width: 100px; height: 100px; border-radius: 30px; }
    .fingerprint-core svg { width: 60px; height: 60px; }
    .terminal-quote-card { margin-top: 12px; padding: 11px 15px 10px; }
    .staff-guidance-card { margin-top: 12px; padding: 12px 14px; }
    .staff-rota-card { margin-top: 12px; padding: 13px; border-radius: 18px; }
    .staff-rota-shifts { margin-top: 9px; }
    .staff-quote-card { margin-top: 14px; padding: 14px 16px 13px 46px; }
    .staff-quote-card::before { top: 8px; left: 14px; font-size: 42px; }
    .staff-quote-card blockquote { font-size: 15px; }
    #staffView { padding: 26px; }
    .staff-identity { gap: 16px; }
    .staff-avatar { width: 68px; height: 68px; border-radius: 21px; }
    .staff-state-card { margin-top: 20px; }
    .terminal-action-button { min-height: 72px; }
}

@media (max-width: 720px) {
    .terminal-topbar,
    .terminal-statusbar { padding-left: 20px; padding-right: 20px; }
    .terminal-date { display: none; }
    .terminal-view { padding-left: 22px; padding-right: 22px; }
    #staffView { width: calc(100% - 24px); border-radius: 24px; }
    .terminal-actions { grid-template-columns: 1fr; }
    .staff-rota-shifts { grid-template-columns: 1fr; }
    .terminal-status-centre { display: none; }
    .terminal-status-item { width: 50%; }
    .terminal-quote-card { width: min(620px, 88vw); padding: 12px 15px 11px; }
    .terminal-stage::before { background-size: min(62vw, 360px); opacity: .06; }
    .staff-quote-card { margin-top: 16px; padding: 14px 16px 14px 46px; }
    .staff-quote-card::before { top: 8px; left: 14px; font-size: 42px; }
    .staff-quote-card blockquote { font-size: 15px; }
}


@media (max-height: 480px) {
    .terminal-topbar {
        padding: 10px 16px;
    }

    .venue-brand-logo {
        height: 42px;
        max-width: 150px;
    }
    .terminal-clock { font-size: 18px; }
    .terminal-date { font-size: 10px; }

    .terminal-view {
        padding: 10px 18px;
    }

    .terminal-stage::before {
        background-size: min(64vw, 280px);
        opacity: .05;
    }

    .fingerprint-orbit {
        width: 92px;
        height: 92px;
        margin-bottom: 8px;
    }

    .fingerprint-ring-two { inset: 10px; }

    .fingerprint-core {
        width: 66px;
        height: 66px;
        border-radius: 21px;
    }

    .fingerprint-core svg {
        width: 41px;
        height: 41px;
    }

    .terminal-kicker {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .terminal-greeting {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .idle-copy h1,
    #resultView h1,
    #errorView h1 {
        font-size: clamp(22px, 6vh, 28px);
    }

    .idle-copy p,
    #resultView p,
    #errorView p {
        margin-top: 7px;
        font-size: 11px;
        line-height: 1.35;
    }

    .terminal-quote-card {
        width: min(560px, 84vw);
        margin-top: 7px;
        padding: 7px 10px 6px;
        border-radius: 11px;
    }

    .terminal-quote-label { margin-bottom: 3px; font-size: 6px; }
    .terminal-quote-card blockquote { font-size: 8px; line-height: 1.3; }
    .terminal-quote-card figcaption { margin-top: 3px; font-size: 7px; }

    #staffView {
        width: calc(100% - 16px);
        max-height: calc(100% - 10px);
        padding: 14px 16px;
        border-radius: 17px;
        overflow-y: auto;
    }

    .terminal-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 20px;
    }

    .staff-identity {
        gap: 11px;
        padding-right: 36px;
    }

    .staff-avatar {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 17px;
    }

    .staff-identity h1 { font-size: 23px; }
    .staff-welcome-caption { font-size: 9px; margin-bottom: 3px; }
    .staff-identity p { margin-top: 2px; font-size: 10px; }

    .staff-state-card {
        margin-top: 10px;
        padding: 9px 11px;
        border-radius: 12px;
    }

    .state-label-caption,
    .staff-last-event span {
        margin-bottom: 2px;
        font-size: 8px;
    }

    .staff-state-card strong { font-size: 14px; }
    .state-indicator { padding: 5px 8px; font-size: 9px; }

    .staff-rota-card { margin-top: 8px; padding: 9px 11px; border-radius: 12px; }
    .staff-rota-main { gap: 8px; }
    .staff-rota-icon { width: 31px; height: 31px; border-radius: 9px; }
    .staff-rota-icon svg { width: 16px; height: 16px; }
    .staff-rota-heading { margin-bottom: 2px; }
    .staff-rota-kicker { font-size: 6px; }
    .staff-rota-status { padding: 3px 5px; font-size: 6px; }
    .staff-rota-copy > strong { font-size: 11px; }
    .staff-rota-copy > p { margin-top: 2px; font-size: 7px; line-height: 1.3; }
    .staff-rota-shifts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
    .staff-rota-shift { padding: 6px 7px; border-radius: 8px; }
    .staff-rota-shift-when { padding-right: 28px; }
    .staff-rota-shift-assignment { margin-top: 3px; }
    .staff-rota-shift-when strong,
    .staff-rota-shift-assignment strong { font-size: 7px; }
    .staff-rota-shift-when span,
    .staff-rota-shift-assignment span { font-size: 6px; }
    .staff-rota-shift-marker { top: 5px; right: 5px; padding: 2px 4px; font-size: 5px; }

    .staff-guidance-card { margin-top: 8px; padding: 9px 11px; border-radius: 12px; }
    .staff-guidance-card strong { font-size: 11px; }
    .staff-guidance-card span { font-size: 9px; line-height: 1.35; }
    .staff-quote-card { margin-top: 8px; padding: 10px 11px 10px 34px; border-radius: 12px; }
    .staff-quote-card::before { top: 7px; left: 10px; font-size: 30px; }
    .staff-quote-label { margin-bottom: 4px; font-size: 7px; }
    .staff-quote-card blockquote { font-size: 9px; line-height: 1.35; }
    .staff-quote-card figcaption { margin-top: 4px; font-size: 7px; }

    .terminal-actions {
        gap: 8px;
        margin-top: 8px;
    }

    .terminal-action-button {
        min-height: 49px;
        padding: 8px 11px;
        border-radius: 12px;
    }

    .terminal-action-button strong { font-size: 13px; }
    .terminal-action-button span { margin-top: 1px; font-size: 9px; }

    .staff-last-event {
        margin-top: 8px;
        padding-top: 8px;
    }

    .staff-last-event strong { font-size: 9px; }

    .result-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 10px;
        border-radius: 20px;
        font-size: 31px;
    }

    .result-time {
        margin-top: 8px;
        font-size: 27px;
    }

    .terminal-secondary-button {
        margin-top: 10px;
        padding: 8px 14px;
        font-size: 11px;
    }

    .terminal-statusbar {
        min-height: 33px;
        padding: 6px 16px;
        font-size: 8px;
    }
}

/* Fingerprint enrolment mode */
#enrollmentView {
    justify-content: center;
}

.enrollment-card {
    width: min(760px, calc(100% - 40px));
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(231, 189, 124, .16);
    border-radius: 32px;
    background:
        radial-gradient(circle at 85% 0%, rgba(231, 189, 124, .12), transparent 34%),
        linear-gradient(145deg, rgba(55, 34, 30, .985), rgba(19, 12, 12, .995));
    box-shadow: 0 35px 120px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.04);
    text-align: center;
}

.enrollment-fingerprint {
    width: 118px;
    height: 118px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(145,210,170,.22);
    border-radius: 36px;
    background: linear-gradient(145deg, rgba(145,210,170,.09), rgba(231,189,124,.06));
    box-shadow: 0 18px 55px rgba(0,0,0,.25), 0 0 48px rgba(145,210,170,.06);
    position: relative;
    isolation: isolate;
}

.enrollment-fingerprint::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 0 58px rgba(145,210,170,.22);
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    will-change: transform, opacity;
}

.enrollment-fingerprint svg {
    width: 72px;
    height: 72px;
    fill: none;
    stroke: var(--pulse-green);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.enrollment-copy .terminal-kicker { margin-bottom: 7px; }
.enrollment-copy h1 { margin: 3px 0 0; font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -.045em; }
.enrollment-copy > p:last-child { margin: 8px 0 0; color: var(--pulse-muted); font-size: 14px; }
.enrollment-hello { margin: 0; color: var(--pulse-gold); font-size: 14px; font-weight: 720; }

.enrollment-instruction {
    display: grid;
    gap: 5px;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.028);
}

.enrollment-instruction strong { color: var(--pulse-soft); font-size: 17px; }
.enrollment-instruction span { color: var(--pulse-muted); font-size: 12px; line-height: 1.45; }

.terminal-busy .enrollment-fingerprint::after { animation: enrollment-scan 1s ease-in-out infinite alternate; }
@keyframes enrollment-scan {
    from { opacity: .18; transform: scale(.94); }
    to { opacity: 1; transform: scale(1.10); }
}

@media (max-height: 560px) {
    .enrollment-card { padding: 18px 24px; }
    .enrollment-fingerprint { width: 76px; height: 76px; margin-bottom: 10px; border-radius: 24px; }
    .enrollment-fingerprint svg { width: 48px; height: 48px; }
    .enrollment-copy h1 { font-size: 28px; }
    .enrollment-copy > p:last-child { margin-top: 4px; font-size: 10px; }
    .enrollment-hello { font-size: 10px; }
    .enrollment-instruction { margin-top: 10px; padding: 10px 12px; }
    .enrollment-instruction strong { font-size: 12px; }
    .enrollment-instruction span { font-size: 9px; }
}

/* Staff messages modal */
.staff-message-modal {
    position:absolute !important;
    inset:0;
    z-index:40 !important;
    display:grid;
    place-items:center;
    padding:clamp(18px,4vw,46px);
}
.staff-message-modal[hidden] { display:none; }
.staff-message-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(7,5,5,.74);
    /* Full-screen backdrop blur is disproportionately expensive on VideoCore IV.
       The opaque tint keeps the same visual separation without re-filtering the scene. */
}
.staff-message-modal-panel {
    position:relative;
    z-index:1;
    width:min(760px,94vw);
    max-height:min(720px,88vh);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(231,189,124,.20);
    border-radius:30px;
    background:
        radial-gradient(circle at 100% 0%,rgba(231,189,124,.075),transparent 34%),
        linear-gradient(145deg,rgba(52,31,28,.995),rgba(19,12,12,.998));
    box-shadow:0 40px 140px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.045);
}
.staff-message-modal-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:25px 28px 20px;
    border-bottom:1px solid rgba(255,255,255,.065);
}
.staff-message-modal-kicker {
    display:block;
    margin-bottom:7px;
    color:var(--pulse-gold);
    font-size:10px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.staff-message-modal-head h2 {
    margin:0;
    color:var(--pulse-text);
    font-size:clamp(25px,3vw,36px);
    line-height:1.04;
    letter-spacing:-.035em;
}
.staff-message-modal-head p {
    margin:8px 0 0;
    color:var(--pulse-muted);
    font-size:12px;
    line-height:1.45;
}
.staff-message-modal-head-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}
.staff-message-modal-count {
    padding:7px 10px;
    border:1px solid rgba(231,189,124,.14);
    border-radius:999px;
    color:var(--pulse-gold);
    background:rgba(231,189,124,.06);
    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.staff-message-modal-close {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    color:var(--pulse-soft);
    background:rgba(255,255,255,.035);
    cursor:pointer;
    font-size:25px;
    line-height:1;
}
.staff-message-modal-close:active { transform:scale(.96); }
.staff-message-modal-list {
    display:grid;
    gap:11px;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:20px 28px 8px;
    scrollbar-width:thin;
    scrollbar-color:rgba(231,189,124,.22) transparent;
    outline:none;
}
.staff-message-modal-list::-webkit-scrollbar { width:6px; }
.staff-message-modal-list::-webkit-scrollbar-track { background:transparent; }
.staff-message-modal-list::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(231,189,124,.20); }
.staff-message-modal-list:focus-visible { box-shadow:inset 0 0 0 2px rgba(231,189,124,.10); }
.staff-message-modal-item {
    position:relative;
    overflow:hidden;
    padding:16px 18px 17px 20px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:18px;
    background:rgba(255,255,255,.026);
    box-shadow:inset 3px 0 0 rgba(196,206,218,.22);
}
.staff-message-modal-item[data-style="celebration"] {
    border-color:rgba(231,189,124,.18);
    background:linear-gradient(100deg,rgba(231,189,124,.08),rgba(255,255,255,.02) 60%);
    box-shadow:inset 4px 0 0 rgba(231,189,124,.72);
}
.staff-message-modal-item[data-style="appreciation"] {
    border-color:rgba(145,210,170,.17);
    background:linear-gradient(100deg,rgba(145,210,170,.07),rgba(255,255,255,.02) 60%);
    box-shadow:inset 4px 0 0 rgba(145,210,170,.68);
}
.staff-message-modal-item[data-style="important"] {
    border-color:rgba(240,139,142,.24);
    background:linear-gradient(100deg,rgba(240,139,142,.085),rgba(255,255,255,.02) 60%);
    box-shadow:inset 5px 0 0 rgba(240,139,142,.84);
}
.staff-message-modal-item-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:9px;
}
.staff-message-modal-item-identity { display:flex;align-items:center;gap:10px;min-width:0; }
.staff-message-modal-item-icon {
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    color:var(--pulse-soft);
    background:rgba(255,255,255,.035);
    font-size:13px;
    font-weight:900;
}
.staff-message-modal-item[data-style="celebration"] .staff-message-modal-item-icon { color:#f0d4a5;border-color:rgba(231,189,124,.18);background:rgba(231,189,124,.08); }
.staff-message-modal-item[data-style="appreciation"] .staff-message-modal-item-icon { color:#a8e9c9;border-color:rgba(145,210,170,.18);background:rgba(145,210,170,.075); }
.staff-message-modal-item[data-style="important"] .staff-message-modal-item-icon { color:#ffb4b4;border-color:rgba(240,139,142,.20);background:rgba(240,139,142,.08); }
.staff-message-modal-item-source { min-width:0; }
.staff-message-modal-item-source > span {
    display:block;
    overflow:hidden;
    color:var(--pulse-gold);
    font-size:8px;
    font-weight:850;
    letter-spacing:.12em;
    text-overflow:ellipsis;
    text-transform:uppercase;
    white-space:nowrap;
}
.staff-message-modal-item-source > strong {
    display:inline-flex;
    margin-top:4px;
    padding:3px 7px;
    border-radius:999px;
    color:var(--pulse-muted);
    background:rgba(255,255,255,.045);
    font-size:8px;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;
}
.staff-message-modal-item[data-style="celebration"] .staff-message-modal-item-source > strong { color:#ecd3a6;background:rgba(231,189,124,.085); }
.staff-message-modal-item[data-style="appreciation"] .staff-message-modal-item-source > strong { color:#b4ebce;background:rgba(145,210,170,.08); }
.staff-message-modal-item[data-style="important"] .staff-message-modal-item-source > strong { color:#ffc7c7;background:rgba(240,139,142,.09); }
.staff-message-modal-position { flex:0 0 auto;color:var(--pulse-muted);font-size:8px;font-weight:750; }
.staff-message-modal-item-title {
    display:block;
    color:var(--pulse-text);
    font-size:18px;
    font-weight:790;
    line-height:1.16;
    letter-spacing:-.022em;
}
.staff-message-modal-item-body {
    margin:6px 0 0;
    color:var(--pulse-soft);
    font-size:12px;
    line-height:1.52;
}
.staff-message-modal-more {
    padding:9px 28px 0;
    color:var(--pulse-gold);
    font-size:8px;
    font-weight:850;
    letter-spacing:.08em;
    text-align:center;
    text-transform:uppercase;
}
.staff-message-modal-more[hidden] { display:none; }
.staff-message-modal-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:17px 28px 22px;
}
.staff-message-modal-foot > span { color:var(--pulse-muted);font-size:9px;line-height:1.4; }
.staff-message-modal-continue {
    min-height:46px;
    padding:11px 18px;
    border:1px solid rgba(145,210,170,.24);
    border-radius:15px;
    color:#d8f7e7;
    background:linear-gradient(145deg,rgba(145,210,170,.14),rgba(231,189,124,.055));
    box-shadow:inset 0 1px rgba(255,255,255,.045);
    cursor:pointer;
    font-size:12px;
    font-weight:780;
}
.staff-message-modal-continue:active { transform:scale(.985); }
.staff-message-modal-open #staffView { opacity:.92; }

@media (max-width:760px), (max-height:700px) {
    .staff-message-modal { padding:14px; }
    .staff-message-modal-panel { width:min(700px,96vw);max-height:92vh;border-radius:22px; }
    .staff-message-modal-head { gap:12px;padding:17px 18px 14px; }
    .staff-message-modal-head h2 { font-size:24px; }
    .staff-message-modal-head p { margin-top:5px;font-size:9px; }
    .staff-message-modal-count { padding:5px 7px;font-size:7px; }
    .staff-message-modal-close { width:34px;height:34px;border-radius:10px;font-size:21px; }
    .staff-message-modal-list { gap:8px;padding:14px 18px 5px; }
    .staff-message-modal-item { padding:11px 12px 12px 14px;border-radius:14px; }
    .staff-message-modal-item-top { margin-bottom:6px; }
    .staff-message-modal-item-icon { width:25px;height:25px;border-radius:8px;font-size:10px; }
    .staff-message-modal-item-title { font-size:14px; }
    .staff-message-modal-item-body { margin-top:4px;font-size:9px;line-height:1.42; }
    .staff-message-modal-foot { gap:10px;padding:12px 18px 16px; }
    .staff-message-modal-continue { min-height:38px;padding:8px 12px;border-radius:12px;font-size:9px; }
}

@media (max-height:520px) {
    .staff-message-modal-panel { max-height:94vh;border-radius:18px; }
    .staff-message-modal-head { padding:11px 14px 9px; }
    .staff-message-modal-kicker { margin-bottom:3px;font-size:6px; }
    .staff-message-modal-head h2 { font-size:18px; }
    .staff-message-modal-head p { display:none; }
    .staff-message-modal-count { font-size:6px; }
    .staff-message-modal-close { width:28px;height:28px;font-size:18px; }
    .staff-message-modal-list { gap:6px;padding:9px 14px 3px; }
    .staff-message-modal-item { padding:8px 9px 8px 11px;border-radius:11px; }
    .staff-message-modal-item-icon { width:20px;height:20px;border-radius:6px;font-size:8px; }
    .staff-message-modal-item-source > span,.staff-message-modal-item-source > strong,.staff-message-modal-position { font-size:6px; }
    .staff-message-modal-item-title { font-size:11px; }
    .staff-message-modal-item-body { font-size:7px;line-height:1.35; }
    .staff-message-modal-more { padding-top:4px;font-size:6px; }
    .staff-message-modal-foot { padding:7px 14px 9px; }
    .staff-message-modal-foot > span { display:none; }
    .staff-message-modal-continue { width:100%;min-height:30px;padding:6px 10px;font-size:8px; }
}

/* --------------------------------------------------------------------------
   Physical R503 -> screen bridge
   -------------------------------------------------------------------------- */

.hardware-state-card {
    display: flex;
    width: min(620px, 86vw);
    flex-direction: column;
    align-items: center;
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid rgba(231, 189, 124, .16);
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% 12%, rgba(214, 160, 146, .12), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: 0 28px 90px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
    text-align: center;
}

.hardware-state-card h1 {
    margin: 10px 0 8px;
    color: var(--pulse-text);
    font-size: clamp(30px, 4.8vw, 58px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.hardware-state-card > p {
    max-width: 520px;
    margin: 0;
    color: var(--pulse-muted);
    font-size: clamp(14px, 1.7vw, 20px);
    line-height: 1.5;
}

.hardware-fingerprint {
    position: relative;
    display: grid;
    width: 142px;
    height: 142px;
    place-items: center;
    margin-bottom: 20px;
    border: 1px solid rgba(214, 160, 146, .19);
    border-radius: 44px;
    color: var(--pulse-gold);
    background: rgba(255,255,255,.035);
    box-shadow: 0 18px 55px rgba(0,0,0,.18);
    overflow: visible;
}

.hardware-fingerprint svg {
    width: 78px;
    height: 78px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: hardware-fingerprint-pulse 1.1s ease-in-out infinite alternate;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.hardware-radar {
    position: absolute;
    inset: -13px;
    border: 1px solid rgba(231, 189, 124, .16);
    border-radius: 52px;
    animation: hardware-radar 1.8s ease-out infinite;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.hardware-radar-two { animation-delay: .72s; }

.hardware-progress {
    width: min(360px, 68vw);
    height: 4px;
    margin-top: 26px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.hardware-progress span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--pulse-gold), transparent);
    animation: hardware-progress 1.15s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.hardware-state-card[data-state="finger_detected"] .hardware-fingerprint,
.hardware-state-card[data-state="processing"] .hardware-fingerprint {
    color: #d7a8d5;
    border-color: rgba(215, 168, 213, .24);
}

.hardware-state-card[data-state="offline"] {
    border-color: rgba(240, 139, 142, .24);
    background: linear-gradient(145deg, rgba(240, 139, 142, .08), rgba(255,255,255,.018));
}

.hardware-state-card[data-state="offline"] .hardware-fingerprint {
    color: var(--pulse-danger);
    border-color: rgba(240, 139, 142, .25);
}

@keyframes hardware-radar {
    0% { opacity: .7; transform: scale(.88); }
    75%, 100% { opacity: 0; transform: scale(1.18); }
}

@keyframes hardware-fingerprint-pulse {
    from { opacity: .58; transform: scale(.96); }
    to { opacity: 1; transform: scale(1.03); }
}

@keyframes hardware-progress {
    0% { transform: translateX(-145%); }
    100% { transform: translateX(345%); }
}

@media (max-width: 720px), (max-height: 650px) {
    .hardware-state-card { padding: 22px; border-radius: 26px; }
    .hardware-fingerprint { width: 104px; height: 104px; margin-bottom: 14px; border-radius: 32px; }
    .hardware-fingerprint svg { width: 58px; height: 58px; }
    .hardware-radar { inset: -9px; border-radius: 38px; }
    .hardware-progress { margin-top: 18px; }
}

/* Pulse gamification: compact enough for the 1024x600 kiosk and intentionally
   secondary to attendance actions. It never turns the clocking screen into a leaderboard. */
.staff-pulse-strip {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 8px;
}
.staff-pulse-strip[hidden] { display: none; }
.staff-pulse-strip > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(231,189,124,.13);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(231,189,124,.07), rgba(255,255,255,.025));
}
.staff-pulse-strip span,
.staff-pulse-strip small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.staff-pulse-strip span {
    color: var(--pulse-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.staff-pulse-strip strong {
    display: block;
    margin-top: 2px;
    color: var(--pulse-soft);
    font-size: 18px;
    line-height: 1.05;
}
.staff-pulse-strip small { margin-top: 2px; color: var(--pulse-muted); font-size: 8px; }
.staff-pulse-primary strong { color: var(--pulse-gold); font-size: 23px; }
.result-pulse-moment {
    width: min(520px, 80vw);
    margin-top: 15px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid rgba(231,189,124,.2);
    border-radius: 16px;
    background: rgba(231,189,124,.07);
}
.result-pulse-moment[hidden] { display: none; }
.result-pulse-moment > span { color: var(--pulse-gold); font-size: 24px; }
.result-pulse-moment > div { display: grid; text-align: left; }
.result-pulse-moment small { color: var(--pulse-gold); font-size: 7px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.result-pulse-moment strong { color: var(--pulse-soft); font-size: 13px; }
.result-pulse-moment em { color: var(--pulse-muted); font-size: 9px; font-style: normal; }
@media (max-height: 480px) {
    .staff-pulse-strip { margin-top: 7px; gap: 5px; }
    .staff-pulse-strip > div { padding: 6px 7px; border-radius: 9px; }
    .staff-pulse-strip span { font-size: 5px; }
    .staff-pulse-strip strong { margin-top: 1px; font-size: 11px; }
    .staff-pulse-primary strong { font-size: 14px; }
    .staff-pulse-strip small { font-size: 5px; }
    .result-pulse-moment { margin-top: 8px; padding: 7px 9px; gap: 7px; border-radius: 10px; }
    .result-pulse-moment > span { font-size: 16px; }
    .result-pulse-moment small { font-size: 5px; }
    .result-pulse-moment strong { font-size: 9px; }
    .result-pulse-moment em { font-size: 6px; }
}

/* ==========================================================================
   QRelia Pulse physical terminal — native 1024 × 600 landscape layout
   --------------------------------------------------------------------------
   The production terminal is a fixed 1024x600 kiosk.  This profile stops
   treating that viewport as a "short desktop" and instead gives every state
   a dedicated landscape composition.  It intentionally sits last so it wins
   over the older generic max-height rules without changing larger browsers.
   ========================================================================== */

.staff-terminal-grid,
.staff-terminal-primary,
.staff-terminal-secondary {
    display: contents;
}

/* Pommie feature flag: do not alter the mascot renderer/state machine. The original
   DOM remains intact and simply becomes non-rendering while the venue switch is OFF. */
.terminal-shell.pommie-disabled .pommie-progress-card,
.terminal-shell.pommie-disabled .pommie-actor,
.terminal-shell.pommie-disabled .pommie-evolution-reward {
    display: none !important;
}

@media (min-width: 800px) and (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {
    html,
    body {
        width: 100vw;
        height: 100vh;
        min-width: 0;
        min-height: 0;
    }

    .terminal-shell {
        grid-template-rows: 82px minmax(0, 1fr) 40px;
        height: 100vh;
        min-height: 0;
    }

    .terminal-topbar {
        min-height: 0;
        /* The installed 7" panel sits fractionally under the enclosure's top
           lip. Keep critical branding/clock content below that physical edge
           without changing the kiosk's 1024x600 composition. */
        padding: 26px 22px 0;
    }

    .venue-brand-logo {
        height: 46px;
        max-width: 220px;
    }

    .terminal-clock-wrap {
        gap: 11px;
    }

    .terminal-date {
        display: inline;
        font-size: 11px;
    }

    .terminal-clock {
        font-size: 23px;
    }

    .terminal-stage {
        min-height: 0;
        overflow: hidden;
    }

    .terminal-stage::before {
        background-size: 330px auto;
        opacity: .055;
    }

    .terminal-view {
        min-width: 0;
        min-height: 0;
        padding: 18px 34px;
    }

    .terminal-statusbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        min-height: 40px;
        padding: 7px 22px;
        column-gap: 14px;
        font-size: 9px;
    }

    .terminal-status-item {
        width: auto;
        min-width: 0;
    }

    .terminal-network-status {
        justify-self: stretch;
    }

    .terminal-status-centre {
        display: block;
        min-width: 0;
        max-width: 390px;
        overflow: visible;
        text-overflow: clip;
    }

    .terminal-status-right {
        justify-self: stretch;
        justify-content: flex-end;
        min-width: 0;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .terminal-network-status #networkLabel {
        overflow: visible;
        text-overflow: clip;
    }

    /* Idle / ready screen: use the width of the landscape panel instead of
       stacking a large fingerprint above the copy. */
    #idleView {
        display: grid;
        grid-template-columns: 170px minmax(0, 610px);
        grid-template-rows: auto auto;
        align-content: center;
        align-items: center;
        justify-content: center;
        gap: 13px 38px;
        padding: 22px 52px;
    }

    #idleView .fingerprint-orbit {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 158px;
        height: 158px;
        margin: 0;
        justify-self: center;
    }

    #idleView .fingerprint-ring-two {
        inset: 16px;
    }

    #idleView .fingerprint-core {
        width: 108px;
        height: 108px;
        border-radius: 32px;
    }

    #idleView .fingerprint-core svg {
        width: 65px;
        height: 65px;
    }

    #idleView .idle-copy,
    #idleView .terminal-warning-copy {
        grid-column: 2;
        min-width: 0;
        max-width: none;
        text-align: left;
    }

    #idleView .terminal-kicker {
        margin-bottom: 7px;
        font-size: 10px;
    }

    #idleView .terminal-greeting {
        margin-bottom: 7px;
        font-size: 15px;
    }

    #idleView .idle-copy h1,
    #idleView .terminal-warning-copy h1 {
        font-size: clamp(31px, 4vw, 40px);
        line-height: 1.03;
    }

    #idleView .idle-copy p,
    #idleView .terminal-warning-copy p {
        max-width: 590px;
        margin: 10px 0 0;
        font-size: 14px;
        line-height: 1.42;
    }

    #idleView .terminal-quote-card {
        grid-column: 2;
        width: 100%;
        max-width: 590px;
        margin: 0;
        padding: 11px 15px 10px;
        border-radius: 15px;
        text-align: left;
    }

    #idleView .terminal-quote-label {
        margin-bottom: 4px;
        font-size: 7px;
    }

    #idleView .terminal-quote-card blockquote {
        font-size: 11px;
        line-height: 1.38;
        overflow-wrap: anywhere;
    }

    #idleView .terminal-warning-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 108px;
        height: 108px;
        margin: 0;
        border-radius: 32px;
        font-size: 48px;
        justify-self: center;
    }

    /* Recognised staff screen: two independent columns ensure attendance,
       Pulse, rota and actions all remain visible in the 494px stage. */
    #staffView {
        width: calc(100% - 24px);
        height: calc(100% - 16px);
        max-height: none;
        padding: 15px 17px;
        border-radius: 24px;
        overflow: hidden;
    }

    #staffView .staff-terminal-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }

    #staffView .staff-terminal-primary,
    #staffView .staff-terminal-secondary {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        min-height: 0;
    }

    #staffView .terminal-close {
        top: 11px;
        right: 12px;
        z-index: 3;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 22px;
    }

    #staffView .staff-identity {
        gap: 12px;
        min-width: 0;
        padding-right: 38px;
    }

    #staffView .staff-identity > div:last-child {
        min-width: 0;
    }

    #staffView .staff-avatar {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        font-size: 21px;
    }

    #staffView .staff-identity .terminal-kicker {
        margin-bottom: 2px;
        font-size: 7px;
    }

    #staffView .staff-welcome-caption {
        margin: 0 0 2px;
        font-size: 11px;
        line-height: 1.2;
    }

    #staffView .staff-identity h1 {
        font-size: 28px;
        line-height: 1;
        overflow-wrap: anywhere;
    }

    #staffView .staff-identity p {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    #staffView .staff-state-card {
        margin-top: 0;
        padding: 11px 13px;
        border-radius: 14px;
    }

    #staffView .state-label-caption,
    #staffView .staff-last-event span {
        margin-bottom: 2px;
        font-size: 7px;
    }

    #staffView .staff-state-card strong {
        font-size: 17px;
    }

    #staffView .state-indicator {
        padding: 6px 9px;
        font-size: 10px;
    }

    #staffView .staff-pulse-strip {
        grid-template-columns: 1.3fr .85fr .85fr;
        gap: 7px;
        margin-top: 0;
    }

    #staffView .staff-pulse-strip > div {
        padding: 9px 10px;
        border-radius: 11px;
    }

    #staffView .staff-pulse-strip span,
    #staffView .staff-pulse-strip small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #staffView .staff-pulse-strip span {
        font-size: 7px;
        line-height: 1.2;
    }

    #staffView .staff-pulse-strip strong {
        margin-top: 2px;
        font-size: 16px;
    }

    #staffView .staff-pulse-primary strong {
        font-size: 21px;
    }

    #staffView .staff-pulse-strip small {
        margin-top: 2px;
        font-size: 7px;
        line-height: 1.15;
    }

    #staffView .staff-guidance-card {
        gap: 4px;
        margin-top: 0;
        padding: 11px 13px;
        border-radius: 13px;
    }

    #staffView .staff-guidance-card strong {
        font-size: 13px;
    }

    #staffView .staff-guidance-card span {
        font-size: 11px;
        line-height: 1.36;
        overflow-wrap: anywhere;
    }

    #staffView .terminal-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 1 1 0;
        min-height: 142px;
        gap: 9px;
        margin-top: 0;
    }

    #staffView .terminal-actions:has(.terminal-action-button:only-child) {
        grid-template-columns: 1fr;
    }

    #staffView .terminal-action-button {
        height: 100%;
        min-height: 76px;
        padding: 13px 58px 13px 15px;
        overflow: hidden;
        border: 2px solid rgba(231, 189, 124, .42);
        border-radius: 15px;
        background:
            radial-gradient(circle at 100% 0%, rgba(231, 189, 124, .18), transparent 42%),
            linear-gradient(145deg, rgba(231, 189, 124, .16), rgba(255,255,255,.055));
        box-shadow:
            0 8px 18px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.10),
            inset 0 -2px 0 rgba(0,0,0,.18);
    }

    #staffView .terminal-action-button::after {
        content: "TAP";
        position: absolute;
        top: 50%;
        right: 12px;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 12px;
        color: #fff2df;
        background: rgba(231, 189, 124, .18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
        font-size: 7px;
        font-weight: 900;
        letter-spacing: .10em;
        transform: translateY(-50%);
    }

    #staffView .terminal-action-button:hover,
    #staffView .terminal-action-button:focus-visible {
        border-color: rgba(231, 189, 124, .70);
        background:
            radial-gradient(circle at 100% 0%, rgba(231, 189, 124, .25), transparent 42%),
            linear-gradient(145deg, rgba(231, 189, 124, .22), rgba(255,255,255,.07));
        box-shadow:
            0 10px 22px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.14),
            inset 0 -2px 0 rgba(0,0,0,.16);
    }

    #staffView .terminal-action-button:active {
        transform: translateY(2px) scale(.99);
        box-shadow:
            0 3px 8px rgba(0,0,0,.20),
            inset 0 2px 4px rgba(0,0,0,.20);
    }

    #staffView .terminal-action-button strong {
        font-size: 19px;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    #staffView .terminal-action-button span {
        margin-top: 5px;
        color: #ead8ca;
        font-size: 12px;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    #staffView .terminal-action-primary {
        border-color: rgba(124,229,176,.58);
        background:
            radial-gradient(circle at 100% 0%, rgba(124,229,176,.22), transparent 42%),
            linear-gradient(145deg, rgba(124,229,176,.22), rgba(255,213,155,.075));
    }

    #staffView .terminal-action-primary::after {
        color: #d9ffeb;
        background: rgba(124,229,176,.20);
        border-color: rgba(124,229,176,.34);
    }

    #staffView .terminal-action-unscheduled {
        border-color: rgba(232,185,122,.58);
        background:
            radial-gradient(circle at 100% 0%, rgba(232,185,122,.22), transparent 42%),
            linear-gradient(145deg, rgba(232,185,122,.20), rgba(255,255,255,.045));
    }

    #staffView .terminal-action-unscheduled::after {
        color: #ffe8c7;
        background: rgba(232,185,122,.20);
        border-color: rgba(232,185,122,.34);
    }

    #staffView .terminal-action-danger {
        border-color: rgba(240,139,142,.48);
        background:
            radial-gradient(circle at 100% 0%, rgba(240,139,142,.18), transparent 42%),
            linear-gradient(145deg, rgba(240,139,142,.15), rgba(255,255,255,.04));
    }

    #staffView .terminal-action-danger::after {
        color: #ffdadd;
        background: rgba(240,139,142,.17);
        border-color: rgba(240,139,142,.30);
    }

    #staffView .staff-rota-card {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        min-height: 0;
        margin: 0;
        padding: 10px 11px;
        border-radius: 14px;
    }

    #staffView .staff-rota-main {
        gap: 7px;
    }

    #staffView .staff-rota-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    #staffView .staff-rota-icon svg {
        width: 16px;
        height: 16px;
    }

    #staffView .staff-rota-heading {
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 2px;
    }

    #staffView .staff-rota-kicker {
        font-size: 6px;
        line-height: 1.2;
    }

    #staffView .staff-rota-status {
        max-width: 165px;
        padding: 2px 5px;
        font-size: 5.5px;
        line-height: 1.2;
        white-space: normal;
        text-align: right;
        overflow-wrap: anywhere;
    }

    #staffView .staff-rota-copy > strong {
        font-size: 13px;
        line-height: 1.14;
        overflow-wrap: anywhere;
    }

    #staffView .staff-rota-copy > p {
        margin-top: 2px;
        font-size: 8px;
        line-height: 1.24;
        overflow-wrap: anywhere;
    }

    #staffView .staff-rota-shifts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        flex: 0 0 auto;
        align-items: stretch;
        gap: 5px;
        margin-top: 6px;
    }

    #staffView .staff-rota-shift {
        min-height: 58px;
        padding: 6px 7px;
        border-radius: 10px;
    }

    #staffView .staff-rota-shift-when {
        display: block;
        padding-right: 27px;
    }

    #staffView .staff-rota-shift-assignment {
        gap: 1px;
        margin-top: 3px;
    }

    #staffView .staff-rota-shift-when strong,
    #staffView .staff-rota-shift-assignment strong,
    #staffView .staff-rota-shift-when span,
    #staffView .staff-rota-shift-assignment span {
        display: block;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #staffView .staff-rota-shift-when strong,
    #staffView .staff-rota-shift-assignment strong {
        font-size: 8px;
        line-height: 1.18;
    }

    #staffView .staff-rota-shift-when span,
    #staffView .staff-rota-shift-assignment span {
        font-size: 7px;
        line-height: 1.18;
    }

    #staffView .staff-rota-shift-marker {
        top: 5px;
        right: 5px;
        padding: 2px 4px;
        font-size: 4.5px;
    }

    #staffView .staff-rota-shift-split .staff-rota-shift-when {
        padding-right: 0;
    }

    #staffView .staff-rota-shift-split .staff-rota-split-label {
        font-size: 6px;
    }

    #staffView .staff-rota-split-periods {
        gap: 2px;
        margin-top: 3px;
    }

    #staffView .staff-rota-split-period { gap: 4px; }
    #staffView .staff-rota-split-period-number {
        width: 11px;
        height: 11px;
        border-radius: 3px;
        font-size: 6px;
    }

    #staffView .staff-rota-split-period strong {
        font-size: 7px;
        line-height: 1.25;
    }

    #staffView .staff-rota-split-period-state {
        font-size: 6px;
        line-height: 1.25;
    }

    #staffView .staff-rota-split-gap {
        margin-top: 3px;
        font-size: 6px;
        line-height: 1.2;
    }

    #staffView .staff-terminal-secondary {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
    }

    #staffView .staff-secondary-dashboard {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        min-height: 0;
    }

    #staffView .staff-secondary-dashboard .staff-pulse-strip {
        grid-template-columns: 1.2fr .9fr .9fr;
        flex: 0 0 auto;
        gap: 7px;
        margin: 0;
    }

    #staffView .staff-secondary-dashboard .staff-pulse-strip > div {
        min-height: 62px;
        padding: 8px 9px;
    }

    #staffView .staff-secondary-dashboard .staff-pulse-strip strong {
        font-size: 15px;
    }

    #staffView .staff-secondary-dashboard .staff-pulse-primary strong {
        font-size: 19px;
    }

    #staffView .staff-secondary-bottom {
        display: grid;
        grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
        flex: 1 1 auto;
        gap: 10px;
        min-width: 0;
        min-height: 0;
    }

    #staffView .staff-last-event {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 13px 14px;
        border: 1px solid rgba(231,189,124,.13);
        border-radius: 14px;
        background:
            radial-gradient(circle at 0% 100%, rgba(231,189,124,.08), transparent 48%),
            rgba(255,255,255,.025);
    }

    #staffView .staff-last-event span {
        margin-bottom: 6px;
        font-size: 7px;
    }

    #staffView .staff-last-event strong {
        display: block;
        font-size: 12px;
        line-height: 1.32;
        overflow-wrap: anywhere;
    }

    #staffView .staff-quote-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        min-height: 0;
        height: 100%;
        margin: 0;
        padding: 13px 14px 13px 40px;
        border-radius: 14px;
    }

    #staffView .staff-quote-card::before {
        top: 7px;
        left: 10px;
        font-size: 32px;
    }

    #staffView .staff-quote-label {
        margin-bottom: 4px;
        font-size: 6px;
    }

    #staffView .staff-quote-card blockquote {
        font-size: 10px;
        line-height: 1.30;
        overflow-wrap: anywhere;
    }

    #staffView .staff-quote-card figcaption {
        margin-top: 3px;
        font-size: 7px;
    }

    /* Fingerprint bridge screen. */
    .hardware-state-card {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        width: min(780px, calc(100% - 64px));
        min-height: 0;
        padding: 26px 32px;
        column-gap: 30px;
        row-gap: 6px;
        border-radius: 26px;
        text-align: left;
    }

    .hardware-fingerprint {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 126px;
        height: 126px;
        margin: 0;
        border-radius: 38px;
        justify-self: center;
    }

    .hardware-fingerprint svg {
        width: 70px;
        height: 70px;
    }

    .hardware-state-card .terminal-kicker {
        grid-column: 2;
        margin: 0;
        font-size: 9px;
    }

    .hardware-state-card h1 {
        grid-column: 2;
        margin: 0;
        font-size: 36px;
        line-height: 1.02;
        overflow-wrap: anywhere;
    }

    .hardware-state-card > p {
        grid-column: 2;
        max-width: none;
        margin: 0;
        font-size: 14px;
        line-height: 1.38;
        overflow-wrap: anywhere;
    }

    .hardware-progress {
        grid-column: 2;
        width: 100%;
        max-width: 420px;
        height: 5px;
        margin-top: 7px;
    }

    /* Fingerprint enrolment uses the same horizontal visual rhythm. */
    .enrollment-card {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        width: min(800px, calc(100% - 64px));
        padding: 24px 30px;
        gap: 14px 28px;
        border-radius: 25px;
        text-align: left;
    }

    .enrollment-fingerprint {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 112px;
        height: 112px;
        margin: 0;
        border-radius: 34px;
        justify-self: center;
    }

    .enrollment-fingerprint svg {
        width: 67px;
        height: 67px;
    }

    .enrollment-copy {
        min-width: 0;
    }

    .enrollment-copy .terminal-kicker {
        margin-bottom: 4px;
        font-size: 8px;
    }

    .enrollment-hello {
        font-size: 11px;
    }

    .enrollment-copy h1 {
        margin-top: 2px;
        font-size: 34px;
        line-height: 1.02;
        overflow-wrap: anywhere;
    }

    .enrollment-copy > p:last-child {
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .enrollment-instruction {
        margin: 0;
        padding: 11px 13px;
        border-radius: 13px;
    }

    .enrollment-instruction strong {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .enrollment-instruction span {
        font-size: 9px;
        line-height: 1.32;
        overflow-wrap: anywhere;
    }

    /* Result/error states stay deliberately large, but within the fixed
       vertical budget including the Pulse achievement moment. */
    #resultView,
    #errorView {
        padding: 16px 42px;
    }

    #resultView .result-icon,
    #errorView .result-icon {
        width: 76px;
        height: 76px;
        margin-bottom: 12px;
        border-radius: 23px;
        font-size: 35px;
    }

    #resultView .terminal-kicker,
    #errorView .terminal-kicker {
        margin-bottom: 6px;
        font-size: 9px;
    }

    #resultView h1,
    #errorView h1 {
        font-size: 38px;
        line-height: 1.02;
    }

    #resultView p,
    #errorView p {
        max-width: 690px;
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.38;
        overflow-wrap: anywhere;
    }

    #resultView .result-pulse-moment {
        width: min(560px, 72vw);
        margin-top: 10px;
        padding: 8px 12px;
        border-radius: 12px;
    }

    #resultView .result-time {
        margin-top: 10px;
        font-size: 34px;
    }

    #errorView .terminal-secondary-button {
        margin-top: 13px;
        padding: 9px 15px;
        border-radius: 12px;
        font-size: 11px;
    }

    /* Messages own the available stage. Multiple/long messages scroll only
       inside their reading pane; the modal itself never leaves the screen. */
    .staff-message-modal {
        padding: 9px;
    }

    .staff-message-modal-panel {
        width: min(850px, calc(100% - 18px));
        height: auto;
        max-height: calc(100% - 18px);
        border-radius: 20px;
    }

    .staff-message-modal-head {
        gap: 14px;
        padding: 13px 17px 11px;
    }

    .staff-message-modal-kicker {
        margin-bottom: 3px;
        font-size: 7px;
    }

    .staff-message-modal-head h2 {
        font-size: 22px;
    }

    .staff-message-modal-head p {
        margin-top: 4px;
        font-size: 9px;
        line-height: 1.3;
    }

    .staff-message-modal-count {
        padding: 5px 7px;
        font-size: 7px;
    }

    .staff-message-modal-close {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 21px;
    }

    .staff-message-modal-list {
        gap: 8px;
        padding: 10px 17px 5px;
    }

    .staff-message-modal-item {
        padding: 10px 12px 11px 14px;
        border-radius: 13px;
    }

    .staff-message-modal-item-top {
        margin-bottom: 5px;
    }

    .staff-message-modal-item-icon {
        width: 25px;
        height: 25px;
        border-radius: 8px;
        font-size: 10px;
    }

    .staff-message-modal-item-title {
        font-size: 14px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .staff-message-modal-item-body {
        margin-top: 4px;
        font-size: 10px;
        line-height: 1.38;
        overflow-wrap: anywhere;
    }

    .staff-message-modal-more {
        padding-top: 4px;
        font-size: 7px;
    }

    .staff-message-modal-foot {
        gap: 12px;
        padding: 9px 17px 12px;
    }

    .staff-message-modal-foot > span {
        font-size: 8px;
    }

    .staff-message-modal-continue {
        min-height: 38px;
        padding: 8px 13px;
        border-radius: 11px;
        font-size: 9px;
    }
}

/* ==========================================================================
   Pommie — live terminal character
   --------------------------------------------------------------------------
   Authored full-body key poses carry the acting; a dedicated 8-frame
   contact/down/passing/up cycle carries locomotion. Screen states select the
   appropriate performance instead of bending one neutral drawing into every
   emotion. Motion remains compositor-first so the Raspberry Pi 3 stays cool.
   ========================================================================== */

.pommie-progress-card,
.pommie-actor {
    display: none;
}

@media (min-width: 800px) and (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {
    .terminal-shell[data-terminal-ready="true"][data-active-view="idle"] {
        display: block;
        width: 100vw;
        height: 100vh;
        background:
            radial-gradient(circle at 50% 12%, rgba(232, 185, 122, .10), transparent 23%),
            linear-gradient(145deg, #0d0f12 0%, #090a0c 62%, #111012 100%);
    }

    .terminal-shell[data-terminal-ready="true"][data-active-view="idle"] .terminal-topbar {
        position: absolute;
        /* Physical LCD safe area: keep the whole header clearly below the enclosure lip. */
        top: 26px;
        left: 0;
        right: 0;
        z-index: 20;
        display: flex;
        min-height: 0;
        padding: 8px 18px 7px;
        border-bottom: 1px solid rgba(255,255,255,.055);
        background: linear-gradient(to bottom, rgba(18, 14, 14, .76), rgba(18, 14, 14, .12));
        backdrop-filter: blur(6px);
    }

    .terminal-shell[data-terminal-ready="true"][data-active-view="idle"] .terminal-topbar .venue-brand-logo {
        height: 42px;
        max-width: 205px;
    }

    .terminal-shell[data-terminal-ready="true"]:not([data-active-view="staff"]) .terminal-statusbar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        min-height: 38px;
        padding: 6px 18px;
        column-gap: 12px;
        border-top: 0;
        color: rgba(242, 224, 207, .82);
        background:
            linear-gradient(to bottom, rgba(75, 53, 38, .96) 0, rgba(43, 29, 24, .97) 9px, rgba(22, 16, 15, .98) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 229, 191, .08),
            0 -10px 24px rgba(0, 0, 0, .18);
        backdrop-filter: blur(6px);
        font-size: 9px;
        isolation: isolate;
    }

    /* Pommie's ground: the status strip doubles as a shallow terrace rather
       than reading as a floating UI bar. It stays visible on every screen
       except the employee card view, where the card must own the full stage.
       The seasonal detail is static and date-driven, so the Pi pays virtually
       nothing for it at runtime. */
    .terminal-shell[data-terminal-ready="true"]:not([data-active-view="staff"]) .terminal-statusbar::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: -6px;
        height: 7px;
        pointer-events: none;
        background:
            linear-gradient(to bottom,
                rgba(229, 194, 136, .20) 0,
                rgba(127, 103, 72, .44) 1px,
                rgba(82, 65, 46, .98) 2px,
                rgba(61, 44, 33, .99) 100%);
        box-shadow:
            0 -1px 0 rgba(255, 226, 178, .08),
            0 -5px 12px rgba(0, 0, 0, .16);
    }

    .terminal-shell[data-terminal-ready="true"]:not([data-active-view="staff"]) .terminal-statusbar::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: -7px;
        height: 16px;
        pointer-events: none;
        opacity: .58;
        background:
            radial-gradient(ellipse at 8px 7px, rgba(246, 217, 170, .24) 0 1px, transparent 1.4px) 0 0 / 37px 13px repeat-x,
            radial-gradient(ellipse at 23px 10px, rgba(21, 14, 12, .52) 0 1.2px, transparent 1.7px) 0 0 / 53px 15px repeat-x,
            repeating-linear-gradient(100deg,
                transparent 0 74px,
                rgba(20, 13, 11, .26) 75px 76px,
                transparent 77px 151px);
    }

    .terminal-shell[data-terminal-ready="true"]:not([data-active-view="staff"]) .terminal-statusbar > * {
        position: relative;
        z-index: 1;
    }

    .terminal-shell[data-terminal-ready="true"][data-season="spring"]:not([data-active-view="staff"]) .terminal-statusbar::after {
        background:
            radial-gradient(ellipse at 7px 4px, rgba(121, 176, 86, .70) 0 1.4px, transparent 1.9px) 0 0 / 17px 7px repeat-x,
            radial-gradient(ellipse at 12px 5px, rgba(87, 136, 58, .52) 0 1px, transparent 1.6px) 0 0 / 23px 8px repeat-x,
            radial-gradient(ellipse at 8px 8px, rgba(246, 217, 170, .22) 0 1px, transparent 1.4px) 0 0 / 37px 13px repeat-x,
            radial-gradient(ellipse at 23px 10px, rgba(21, 14, 12, .50) 0 1.2px, transparent 1.7px) 0 0 / 53px 15px repeat-x,
            repeating-linear-gradient(100deg,
                transparent 0 74px,
                rgba(20, 13, 11, .24) 75px 76px,
                transparent 77px 151px);
    }

    .terminal-shell[data-terminal-ready="true"][data-season="summer"]:not([data-active-view="staff"]) .terminal-statusbar::after {
        background:
            radial-gradient(ellipse at 6px 4px, rgba(103, 170, 77, .76) 0 1.5px, transparent 2px) 0 0 / 16px 7px repeat-x,
            radial-gradient(ellipse at 11px 5px, rgba(67, 121, 45, .58) 0 1.1px, transparent 1.7px) 0 0 / 21px 8px repeat-x,
            radial-gradient(ellipse at 8px 8px, rgba(246, 217, 170, .20) 0 1px, transparent 1.4px) 0 0 / 37px 13px repeat-x,
            radial-gradient(ellipse at 23px 10px, rgba(21, 14, 12, .48) 0 1.2px, transparent 1.7px) 0 0 / 53px 15px repeat-x,
            repeating-linear-gradient(100deg,
                transparent 0 74px,
                rgba(20, 13, 11, .24) 75px 76px,
                transparent 77px 151px);
    }

    .terminal-shell[data-terminal-ready="true"][data-season="autumn"]:not([data-active-view="staff"]) .terminal-statusbar::after {
        background:
            radial-gradient(ellipse at 7px 4px, rgba(137, 148, 71, .62) 0 1.4px, transparent 1.9px) 0 0 / 18px 7px repeat-x,
            radial-gradient(ellipse at 13px 5px, rgba(120, 103, 46, .46) 0 1px, transparent 1.6px) 0 0 / 24px 8px repeat-x,
            radial-gradient(ellipse at 8px 8px, rgba(246, 217, 170, .24) 0 1px, transparent 1.4px) 0 0 / 37px 13px repeat-x,
            radial-gradient(ellipse at 23px 10px, rgba(21, 14, 12, .52) 0 1.2px, transparent 1.7px) 0 0 / 53px 15px repeat-x,
            repeating-linear-gradient(100deg,
                transparent 0 74px,
                rgba(20, 13, 11, .26) 75px 76px,
                transparent 77px 151px);
    }

    .terminal-shell[data-terminal-ready="true"][data-season="winter"]:not([data-active-view="staff"]) .terminal-statusbar::before {
        background:
            linear-gradient(to bottom,
                rgba(250, 252, 255, .88) 0,
                rgba(203, 213, 226, .72) 1px,
                rgba(92, 82, 77, .98) 2px,
                rgba(61, 44, 33, .99) 100%);
        box-shadow:
            0 -1px 0 rgba(255, 255, 255, .18),
            0 -5px 12px rgba(0, 0, 0, .16);
    }

    .terminal-shell[data-terminal-ready="true"][data-season="winter"]:not([data-active-view="staff"]) .terminal-statusbar::after {
        background:
            radial-gradient(ellipse at 7px 4px, rgba(255, 255, 255, .90) 0 1.9px, transparent 2.5px) 0 0 / 19px 8px repeat-x,
            radial-gradient(ellipse at 13px 5px, rgba(223, 231, 239, .80) 0 1.4px, transparent 2px) 0 0 / 26px 9px repeat-x,
            radial-gradient(ellipse at 8px 8px, rgba(246, 217, 170, .16) 0 1px, transparent 1.4px) 0 0 / 37px 13px repeat-x,
            radial-gradient(ellipse at 23px 10px, rgba(21, 14, 12, .42) 0 1.2px, transparent 1.7px) 0 0 / 53px 15px repeat-x,
            repeating-linear-gradient(100deg,
                transparent 0 74px,
                rgba(255, 255, 255, .10) 75px 76px,
                transparent 77px 151px);
    }

    .terminal-shell[data-terminal-ready="true"][data-active-view="idle"] .terminal-stage {
        width: 100%;
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .terminal-shell[data-terminal-ready="true"][data-active-view="idle"] .terminal-stage::before {
        width: 440px;
        height: 440px;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        background-position: center;
        background-size: contain;
        opacity: .05;
        filter: saturate(.55) brightness(.82);
    }

    /* The instruction is always physically centred. Pommie lives on a separate
       absolute layer and therefore never pushes the fingerprint UI sideways. */
    #idleView {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 58px 95px 54px;
        text-align: center;
    }

    #idleView .fingerprint-orbit {
        width: 104px;
        height: 104px;
        margin: 0 0 6px;
        flex: 0 0 auto;
    }

    #idleView .fingerprint-ring {
        border-color: rgba(231, 189, 124, .20);
        animation-duration: 4.2s;
    }

    #idleView .fingerprint-ring-two {
        inset: 12px;
        border-color: rgba(231, 189, 124, .12);
    }

    #idleView .fingerprint-core {
        width: 78px;
        height: 78px;
        border-radius: 23px;
        border-color: rgba(231, 189, 124, .52);
        background: linear-gradient(145deg, rgba(92, 52, 35, .96), rgba(33, 22, 22, .98));
        box-shadow: 0 12px 42px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.055);
    }

    #idleView .fingerprint-core svg {
        width: 44px;
        height: 44px;
        stroke: #f3d18f;
        filter: none;
    }

    #idleView .idle-copy {
        width: min(100%, 760px);
        max-width: 760px;
        margin: 0;
        text-align: center;
    }

    #idleView .terminal-kicker {
        margin-bottom: 5px;
        color: #e9bf73;
        font-size: 10px;
        letter-spacing: .21em;
    }

    #idleView .terminal-greeting {
        position: relative;
        left: 50%;
        display: block;
        width: 100vw;
        max-width: none;
        margin: 0 0 4px;
        color: #eee9e2;
        font-size: 16px;
        font-weight: 500;
        text-align: center !important;
        transform: translateX(-50%);
    }

    #idleView .idle-copy h1 {
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        color: #fff7ed;
        font-size: 43px;
        line-height: 1.00;
        letter-spacing: -.045em;
        font-weight: 760;
        text-align: center;
        text-wrap: balance;
    }

    #idleView .idle-copy p:not(.terminal-greeting) {
        max-width: none;
        margin: 7px 0 0;
        color: #d8d2ca;
        font-size: 14px;
        line-height: 1.35;
    }

    #idleView .pommie-progress-card {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: auto 1fr 1px 158px;
        align-items: center;
        width: min(100%, 610px);
        height: 56px;
        margin-top: 12px;
        padding: 7px 15px 7px 17px;
        border: 1px solid rgba(211, 145, 84, .58);
        border-radius: 15px;
        background: linear-gradient(145deg, rgba(43, 31, 28, .87), rgba(16, 17, 20, .90));
        box-shadow: inset 0 1px rgba(255,255,255,.025), 0 10px 34px rgba(0,0,0,.16);
    }

    .pommie-progress-title {
        color: #e5a35d;
        font-size: 13px;
        font-weight: 750;
        white-space: nowrap;
    }

    .pommie-apples {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        padding: 0 12px;
    }

    .pommie-apple {
        display: block;
        width: 25px;
        height: 25px;
        color: rgba(231, 189, 124, .24);
        transition: color .28s ease, transform .28s ease;
    }

    .pommie-apple svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.25;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pommie-apple-filled {
        color: #f0c86f;
        transform: translateY(-1px) scale(1.04);
    }

    .pommie-apple-filled .pommie-apple-body {
        fill: #efc66d;
        stroke: #f5d995;
    }

    .pommie-apple-filled .pommie-apple-leaf {
        fill: #aeb66c;
        stroke: #d1d696;
    }

    .pommie-progress-divider {
        width: 1px;
        height: 36px;
        background: rgba(211, 145, 84, .52);
    }

    .pommie-progress-next {
        padding-left: 14px;
        color: #f1ece6;
        font-size: 11px;
        font-weight: 650;
        line-height: 1.3;
        text-align: left;
    }

    #idleView .terminal-quote-card {
        position: relative;
        z-index: 3;
        width: min(100%, 630px);
        min-height: 72px;
        max-width: 630px;
        margin: 8px 0 0;
        padding: 9px 18px 8px;
        border-color: rgba(211, 145, 84, .42);
        border-radius: 15px;
        background: linear-gradient(145deg, rgba(45, 32, 29, .84), rgba(18, 18, 20, .88));
        text-align: center;
        box-shadow: 0 10px 34px rgba(0,0,0,.13);
    }

    #idleView .terminal-quote-label {
        margin-bottom: 4px;
        color: #e3a65d;
        font-size: 7px;
        letter-spacing: .24em;
    }

    #idleView .terminal-quote-card blockquote {
        color: #f0ebe5;
        font-size: 11px;
        line-height: 1.28;
    }

    #idleView .terminal-quote-card figcaption {
        margin-top: 3px;
        font-size: 8px;
    }


    /* ----- Pommie pose-to-pose renderer -----
       Full-body key poses carry the acting. The only continuous motion is
       restrained breathing while idle and the authored 8-frame walk cycle.
       This is intentionally cheaper and more readable than the old multi-
       layer cut-out rig on the Raspberry Pi 3. */
    .terminal-shell[data-terminal-ready="true"] .pommie-actor {
        --pommie-stage-scale: .82;
        --pommie-facing: 1;
        --pommie-x: 702px;
        --pommie-y: 238px;
        --pommie-travel-ms: 2200ms;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        display: block;
        width: 320px;
        height: 320px;
        pointer-events: none;
        transform: translate3d(var(--pommie-x), var(--pommie-y), 0);
        transition: transform var(--pommie-travel-ms) cubic-bezier(.22,.72,.18,1), opacity .18s ease;
        backface-visibility: hidden;
        contain: layout style;
        will-change: transform;
    }

    .pommie-actor.pommie-teleport {
        transition: none !important;
    }

    .terminal-shell[data-active-view="staff"] .pommie-actor,
    .pommie-actor.pommie-runtime-suspended {
        display: none !important;
        visibility: hidden;
        opacity: 0;
        transition: none !important;
        animation: none !important;
        will-change: auto;
    }

    .pommie-actor.pommie-runtime-suspended *,
    .pommie-actor.pommie-runtime-suspended *::before,
    .pommie-actor.pommie-runtime-suspended *::after {
        animation: none !important;
        transition: none !important;
    }

    .pommie-actor[data-depth="behind"] { z-index: 0; }
    .pommie-actor[data-depth="front"] { z-index: 2; }

    .pommie-character {
        position: absolute;
        inset: 0;
        width: 320px;
        height: 320px;
        transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing));
        transform-origin: 50% 100%;
        transition: transform .24s cubic-bezier(.2,.72,.22,1), filter .36s ease;
        backface-visibility: hidden;
        will-change: transform;
    }

    .pommie-actor[data-travel-direction="left"] .pommie-character {
        --pommie-facing: -1;
    }

    .pommie-pose,
    .pommie-walk-sprite {
        position: absolute;
        inset: 0;
        display: block;
        width: 320px;
        height: 320px;
        user-select: none;
        -webkit-user-drag: none;
        backface-visibility: hidden;
    }

    .pommie-pose {
        object-fit: contain;
        object-position: center bottom;
        opacity: 1;
        transform-origin: 50% 94%;
        transition: opacity .08s linear;
        will-change: transform, opacity;
    }

    .pommie-walk-sprite {
        display: none;
        background-image: var(--pommie-walk-sheet, url('../images/pommie/pommie-walk-loop.webp'));
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 2560px 320px;
        transform-origin: 50% 94%;
        will-change: background-position, transform;
    }

    .pommie-actor[data-render-mode="walk"] .pommie-pose {
        opacity: 0;
    }

    .pommie-actor[data-render-mode="walk"] .pommie-walk-sprite {
        display: block;
        animation: pommie-walk-cycle 1.32s linear infinite;
    }

    .pommie-actor[data-stage="0"] { --pommie-stage-scale: .63; }
    .pommie-actor[data-stage="1"] { --pommie-stage-scale: .73; }
    .pommie-actor[data-stage="2"] { --pommie-stage-scale: .83; }
    .pommie-actor[data-stage="3"] { --pommie-stage-scale: .93; }
    .pommie-actor[data-stage="4"] { --pommie-stage-scale: 1.02; }
    .pommie-actor[data-stage="5"] { --pommie-stage-scale: 1.10; }

    /* Colour and proportions are baked into each evolution form. Runtime CSS
       only supplies the final-form glow; it no longer tries to fake growth. */
    .pommie-actor[data-stage="0"] .pommie-character,
    .pommie-actor[data-stage="1"] .pommie-character,
    .pommie-actor[data-stage="2"] .pommie-character,
    .pommie-actor[data-stage="3"] .pommie-character,
    .pommie-actor[data-stage="4"] .pommie-character { filter: none; }
    .pommie-actor[data-stage="5"] .pommie-character {
        filter: drop-shadow(0 0 12px rgba(225,184,91,.12));
    }

    .pommie-floor {
        position: absolute;
        left: 50%;
        bottom: 5px;
        width: 132px;
        height: 17px;
        border-radius: 50%;
        background: radial-gradient(ellipse, rgba(0,0,0,.50) 0%, rgba(0,0,0,.22) 48%, transparent 75%);
        transform: translateX(-50%) scaleX(var(--pommie-stage-scale));
        transform-origin: center;
        opacity: .76;
        transition: opacity .18s ease, transform .28s ease;
    }

    .pommie-stage-aura {
        position: absolute;
        left: 50%;
        bottom: 32px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        opacity: 0;
        transform: translateX(-50%) scale(.78);
        background: radial-gradient(circle, rgba(244,194,83,.16), rgba(211,145,84,.035) 48%, transparent 70%);
        transition: opacity .5s ease, transform .5s ease;
    }

    .pommie-actor[data-stage="4"] .pommie-stage-aura {
        opacity: .24;
        transform: translateX(-50%) scale(.92);
    }

    .pommie-actor[data-stage="5"] .pommie-stage-aura {
        opacity: .46;
        transform: translateX(-50%) scale(1.04);
    }

    .pommie-actor[data-mode="offscreen"] .pommie-floor,
    .pommie-actor[data-mode="offscreen"] .pommie-stage-aura {
        opacity: 0;
    }


    /* Blinks are authored as a full-face pose. No CSS-drawn eyelids: this keeps
       the lids aligned with Pommie's real eye shape at every stage scale. */

    /* Continuous motion is intentionally subtle. Personality comes from pose
       changes, not from permanently wobbling every body part. */
    .pommie-actor[data-pose="idle"]:not(.pommie-is-walking) .pommie-pose {
        animation: pommie-idle-breathe 5.8s cubic-bezier(.42,0,.58,1) infinite;
    }

    .pommie-actor[data-pose="sleep"] .pommie-pose {
        animation: pommie-sleep-breathe 4.8s ease-in-out infinite;
    }

    .pommie-actor.pommie-pose-changing .pommie-pose {
        animation: pommie-pose-settle .18s cubic-bezier(.2,.75,.25,1) 1;
    }

    /* Pose choreography. Every class supports an authored key pose; these
       transforms supply anticipation, overshoot and settle rather than trying
       to manufacture the action out of a neutral drawing. */
    .pommie-actor.pommie-action-look .pommie-pose {
        animation: pommie-look-performance 1.28s ease-in-out 1;
    }

    .pommie-actor.pommie-action-wave .pommie-pose {
        animation: pommie-wave-performance 1.22s cubic-bezier(.25,.72,.25,1) 1;
    }


    .pommie-actor.pommie-action-content .pommie-pose {
        animation: pommie-content-performance 1.45s ease-in-out 1;
    }

    .pommie-actor.pommie-action-curious .pommie-pose {
        animation: pommie-curious-performance 1.28s ease-in-out 1;
    }

    .pommie-actor.pommie-action-cheeky .pommie-pose {
        animation: pommie-cheeky-performance 1.35s cubic-bezier(.22,.72,.24,1) 1;
    }

    .pommie-actor.pommie-action-happy .pommie-pose {
        animation: pommie-happy-idle-performance 1.5s cubic-bezier(.22,.72,.24,1) 1;
    }

    .pommie-actor.pommie-action-nod .pommie-character {
        animation: pommie-nod .72s ease-in-out 1;
    }

    .pommie-actor.pommie-action-startle .pommie-character {
        animation: pommie-startle .72s cubic-bezier(.18,.78,.2,1) 1;
    }

    .pommie-actor.pommie-action-focus .pommie-pose {
        animation: pommie-focus 1.45s ease-in-out 1;
    }

    .pommie-actor.pommie-action-success .pommie-character {
        animation: pommie-success-body 2.15s cubic-bezier(.2,.72,.22,1) 1;
    }

    .pommie-actor.pommie-action-success .pommie-floor {
        animation: pommie-success-shadow 2.15s ease-in-out 1;
    }

    .pommie-actor.pommie-action-failure .pommie-pose {
        animation: pommie-failure-performance 1.85s ease-in-out 1;
    }

    .pommie-actor.pommie-action-goodbye .pommie-pose {
        animation: pommie-goodbye-performance 1.95s ease-in-out 1;
    }

    .pommie-actor.pommie-action-evolve .pommie-character {
        animation: pommie-evolve-body 2.1s cubic-bezier(.18,.74,.22,1) 1;
    }

    .pommie-actor.pommie-action-evolve .pommie-stage-aura {
        animation: pommie-evolve-aura 2.1s ease-out 1;
    }

    .pommie-actor.pommie-action-wake .pommie-character {
        animation: pommie-wake 1s cubic-bezier(.2,.74,.24,1) 1;
    }


    /* Break reactions deliberately animate the INNER pose layer only. Walking
       owns .pommie-character, so break choreography must never write to that
       transform/animation layer or disturb the walk loop/direction state. */
    .pommie-actor.pommie-action-break-start .pommie-pose {
        transform-origin: 50% 88%;
        animation: pommie-break-start-performance 3.15s cubic-bezier(.24,.68,.26,1) 1 both;
    }

    .pommie-actor.pommie-action-break-end .pommie-pose {
        transform-origin: 50% 88%;
        animation: pommie-break-end-performance 2.35s cubic-bezier(.16,.82,.22,1) 1 both;
    }

    .pommie-actor.pommie-action-break-end .pommie-floor {
        animation: pommie-break-end-shadow 2.35s ease-out 1 both;
    }

    .pommie-actor.pommie-walk-anticipation .pommie-character {
        animation: pommie-walk-anticipation .21s ease-out 1 both;
    }

    .pommie-actor.pommie-is-walking .pommie-character {
        animation: pommie-walk-weight 1.32s linear infinite;
    }

    .pommie-actor.pommie-walk-settle .pommie-character {
        animation: pommie-walk-settle .32s cubic-bezier(.2,.78,.22,1) 1;
    }

    /* Evolution reward stays sparse: one radial glow rather than a permanent
       cloud of animated leaves, preserving Pi 3 headroom. */
    .terminal-shell.pommie-evolution-reward-active .pommie-actor {
        z-index: 14;
    }

    .pommie-evolution-reward {
        position: absolute;
        inset: 54px 0 38px;
        z-index: 11;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 78px;
        overflow: hidden;
        background:
            radial-gradient(circle at 78% 52%, rgba(232,183,77,.18), transparent 27%),
            linear-gradient(90deg, rgba(10,11,13,.97) 0%, rgba(10,11,13,.92) 53%, rgba(13,13,15,.78) 100%);
        backdrop-filter: blur(2px);
    }

    .pommie-evolution-reward[hidden] {
        display: none !important;
    }

    .pommie-evolution-copy {
        position: relative;
        z-index: 2;
        width: 535px;
        padding: 24px 26px;
        border: 1px solid rgba(225,178,99,.28);
        border-radius: 22px;
        background: linear-gradient(145deg, rgba(45,31,27,.90), rgba(18,18,21,.93));
        box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035);
    }

    .pommie-evolution-kicker {
        display: block;
        margin-bottom: 8px;
        color: #e6ad60;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
    }

    .pommie-evolution-copy h2 {
        margin: 0;
        color: #fff6e9;
        font-size: 36px;
        line-height: 1;
        letter-spacing: -.035em;
    }

    .pommie-evolution-copy > p {
        margin: 9px 0 15px;
        max-width: 440px;
        color: #dfd8cf;
        font-size: 14px;
        line-height: 1.45;
    }

    .pommie-evolution-apples {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }

    .pommie-evolution-apples span {
        width: 29px;
        height: 29px;
        color: rgba(235,195,112,.25);
    }

    .pommie-evolution-apples svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.25;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pommie-evolution-apples span.earned {
        color: #f0c86f;
    }

    .pommie-evolution-apples span.earned .pommie-apple-body {
        fill: #efc66d;
        stroke: #f6dc9e;
    }

    .pommie-evolution-apples span.earned .pommie-apple-leaf {
        fill: #adb76b;
        stroke: #d4dc98;
    }

    .pommie-evolution-apples span.just-earned {
        animation: pommie-apple-earned .72s cubic-bezier(.18,.82,.22,1) 1;
    }

    .pommie-evolution-copy > strong {
        display: block;
        color: #f4d28c;
        font-size: 15px;
    }

    .pommie-evolution-copy > small {
        display: block;
        margin-top: 4px;
        color: rgba(235,229,221,.68);
        font-size: 10px;
    }

    .pommie-evolution-burst {
        position: absolute;
        right: 46px;
        top: 50%;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        transform: translateY(-50%);
        background: radial-gradient(circle, rgba(239,193,90,.12), rgba(239,193,90,.035) 42%, transparent 70%);
        opacity: .75;
    }

    .pommie-evolution-burst i {
        display: none;
    }

    @keyframes pommie-walk-cycle {
        0%, 12.49% { background-position: 0 0; }
        12.5%, 24.99% { background-position: -320px 0; }
        25%, 37.49% { background-position: -640px 0; }
        37.5%, 49.99% { background-position: -960px 0; }
        50%, 62.49% { background-position: -1280px 0; }
        62.5%, 74.99% { background-position: -1600px 0; }
        75%, 87.49% { background-position: -1920px 0; }
        87.5%, 100% { background-position: -2240px 0; }
    }

    @keyframes pommie-idle-breathe {
        0%,100% { transform: translate3d(0,0,0) scale(1); }
        48% { transform: translate3d(0,-1.5px,0) scale(1.006,1.012); }
        58% { transform: translate3d(0,-1px,0) scale(1.004,1.009); }
    }

    @keyframes pommie-sleep-breathe {
        0%,100% { transform: translate3d(0,0,0) scale(1); }
        50% { transform: translate3d(0,1px,0) scale(1.008,.994); }
    }


    @keyframes pommie-pose-settle {
        0% { transform: translateY(2px) scale(.995); opacity: .92; }
        100% { transform: translateY(0) scale(1); opacity: 1; }
    }

    @keyframes pommie-look-performance {
        0%,100% { transform: translate3d(0,0,0) rotate(0); }
        24% { transform: translate3d(-2px,1px,0) rotate(-1.8deg); }
        62% { transform: translate3d(2px,-1px,0) rotate(1.6deg); }
    }

    @keyframes pommie-wave-performance {
        0% { transform: translate3d(0,4px,0) rotate(-1deg) scale(.985,1.012); }
        23% { transform: translate3d(0,-4px,0) rotate(1.8deg) scale(1.015,.99); }
        46% { transform: translate3d(0,-2px,0) rotate(-1deg); }
        68% { transform: translate3d(0,-3px,0) rotate(1.1deg); }
        100% { transform: translate3d(0,0,0) rotate(0); }
    }


    @keyframes pommie-content-performance {
        0%,100% { transform: translate3d(0,0,0) rotate(0) scale(1); }
        32% { transform: translate3d(0,2px,0) rotate(-.7deg) scale(1.004,.996); }
        68% { transform: translate3d(0,-1px,0) rotate(.5deg) scale(.998,1.004); }
    }

    @keyframes pommie-curious-performance {
        0%,100% { transform: translate3d(0,0,0) rotate(0); }
        28% { transform: translate3d(-2px,1px,0) rotate(-2.4deg); }
        58% { transform: translate3d(2px,-1px,0) rotate(1.8deg); }
        82% { transform: translate3d(0,1px,0) rotate(-.8deg); }
    }

    @keyframes pommie-cheeky-performance {
        0%,100% { transform: translate3d(0,0,0) rotate(0); }
        22% { transform: translate3d(0,-5px,0) rotate(-2.2deg) scale(1.01,.99); }
        48% { transform: translate3d(2px,-2px,0) rotate(2deg); }
        74% { transform: translate3d(-1px,-3px,0) rotate(-1deg); }
    }

    @keyframes pommie-happy-idle-performance {
        0%,100% { transform: translate3d(0,0,0) scale(1); }
        24% { transform: translate3d(0,3px,0) scale(1.018,.982); }
        46% { transform: translate3d(0,-7px,0) scale(.992,1.012); }
        68% { transform: translate3d(0,-2px,0) rotate(1deg); }
        84% { transform: translate3d(0,1px,0) rotate(-.5deg); }
    }

    @keyframes pommie-nod {
        0%,100% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(0); }
        35% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(4px) scale(.99,.985); }
        66% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-2px) scale(1.006); }
    }

    @keyframes pommie-startle {
        0% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(0); }
        16% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(5px) scale(1.035,.965); }
        43% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-12px) scale(.97,1.035); }
        72% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(2px); }
        100% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(0); }
    }

    @keyframes pommie-focus {
        0%,100% { transform: translateY(0) scale(1); }
        40% { transform: translateY(1px) scale(.996,1.006); }
        68% { transform: translateY(-1px) scale(1.003); }
    }

    @keyframes pommie-success-body {
        0% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(8px) scale(1.035,.965); }
        18% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-20px) scale(.985,1.02); }
        38% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-10px) rotate(2deg); }
        58% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-16px) rotate(-1.6deg); }
        78% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-8px); }
        100% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(0); }
    }

    @keyframes pommie-success-shadow {
        0%,100% { opacity: .72; transform: translateX(-50%) scaleX(var(--pommie-stage-scale)); }
        18% { opacity: .26; transform: translateX(-50%) scaleX(var(--pommie-stage-scale)) scaleX(.72); }
        68% { opacity: .38; transform: translateX(-50%) scaleX(var(--pommie-stage-scale)) scaleX(.82); }
    }

    @keyframes pommie-failure-performance {
        0%,100% { transform: translate3d(0,0,0) rotate(0); }
        18% { transform: translate3d(-3px,1px,0) rotate(-2.8deg); }
        38% { transform: translate3d(3px,0,0) rotate(2.2deg); }
        62% { transform: translate3d(-1px,2px,0) rotate(-1.4deg); }
        82% { transform: translate3d(1px,0,0) rotate(.8deg); }
    }

    @keyframes pommie-goodbye-performance {
        0%,100% { transform: translate3d(0,0,0) rotate(0); }
        20% { transform: translate3d(0,-5px,0) rotate(-2deg); }
        42% { transform: translate3d(2px,-3px,0) rotate(2.4deg); }
        66% { transform: translate3d(-1px,-4px,0) rotate(-1.3deg); }
        84% { transform: translate3d(1px,-1px,0) rotate(.6deg); }
    }

    @keyframes pommie-evolve-body {
        0% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(9px) scale(1.04,.95); }
        20% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-24px) scale(.98,1.03); }
        40% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-13px) rotate(2.5deg); }
        58% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-19px) rotate(-2deg); }
        78% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-7px); }
        100% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(0); }
    }

    @keyframes pommie-evolve-aura {
        0% { opacity: 0; transform: translateX(-50%) scale(.4); }
        32% { opacity: .85; transform: translateX(-50%) scale(1.2); }
        72% { opacity: .46; transform: translateX(-50%) scale(1.02); }
        100% { opacity: .22; transform: translateX(-50%) scale(.94); }
    }

    @keyframes pommie-wake {
        0% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(7px) scale(1.04,.94); }
        35% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-5px) scale(.98,1.03); }
        65% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(1px); }
        100% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(0); }
    }


    @keyframes pommie-break-start-performance {
        0% { transform: translate3d(0,-5px,0) rotate(0) scale(.99,1.015); }
        16% { transform: translate3d(-5px,3px,0) rotate(-2.3deg) scale(1.012,.988); }
        34% { transform: translate3d(2px,9px,0) rotate(.7deg) scale(1.026,.974); }
        52% { transform: translate3d(-1px,7px,0) rotate(-.35deg) scale(1.012,.988); }
        74% { transform: translate3d(1px,9px,0) rotate(.2deg) scale(1.018,.982); }
        100% { transform: translate3d(0,8px,0) rotate(0) scale(1.014,.986); }
    }

    @keyframes pommie-break-end-performance {
        0% { transform: translate3d(0,8px,0) rotate(0) scale(1.025,.975); }
        15% { transform: translate3d(0,12px,0) rotate(-.8deg) scale(1.055,.945); }
        34% { transform: translate3d(0,-26px,0) rotate(3deg) scale(.975,1.035); }
        50% { transform: translate3d(7px,-16px,0) rotate(-3.2deg) scale(.99,1.018); }
        67% { transform: translate3d(-6px,-20px,0) rotate(2.2deg); }
        82% { transform: translate3d(2px,-8px,0) rotate(-.9deg); }
        100% { transform: translate3d(0,0,0) rotate(0) scale(1); }
    }

    @keyframes pommie-break-end-shadow {
        0%,100% { opacity: .72; transform: translateX(-50%) scaleX(var(--pommie-stage-scale)); }
        34% { opacity: .2; transform: translateX(-50%) scaleX(var(--pommie-stage-scale)) scaleX(.64); }
        67% { opacity: .34; transform: translateX(-50%) scaleX(var(--pommie-stage-scale)) scaleX(.78); }
    }

    @keyframes pommie-walk-anticipation {
        0% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translate3d(0,0,0); }
        100% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translate3d(-4px,4px,0) scale(1.015,.982); }
    }

    @keyframes pommie-walk-weight {
        0%,100% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(0); }
        25% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(1.5px); }
        50% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-1px); }
        75% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(1.2px); }
    }

    @keyframes pommie-walk-settle {
        0% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-1px); }
        38% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(3px) scale(1.012,.988); }
        70% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(-1px) scale(.997,1.004); }
        100% { transform: scale(var(--pommie-stage-scale)) scaleX(var(--pommie-facing)) translateY(0); }
    }

    @keyframes pommie-apple-earned {
        0% { transform: scale(.75) rotate(-12deg); }
        45% { transform: scale(1.34) rotate(8deg); }
        72% { transform: scale(.94) rotate(-3deg); }
        100% { transform: scale(1) rotate(0); }
    }


}

@media (prefers-reduced-motion: reduce) {
    .pommie-actor,
    .pommie-character,
    .pommie-pose,
    .pommie-walk-sprite,
    .pommie-floor,
    .pommie-stage-aura,
    .pommie-evolution-apples span {
        animation: none !important;
        transition: none !important;
    }
}