.face-stop-banner{display:grid;grid-template-columns:38px minmax(0,1fr) 58px;gap:12px;align-items:center;padding:14px 17px;margin:0 0 16px;border:1px solid var(--yellow);border-radius:15px;background:color-mix(in srgb,var(--yellow) 10%,var(--panel));position:relative;overflow:hidden}
.face-stop-banner.hidden{display:none}.face-stop-banner>span:nth-child(2){min-width:0;display:grid;gap:4px}.face-stop-banner strong{font-size:17px;line-height:1.35}.face-stop-banner small{font-size:13px;line-height:1.45;color:var(--muted)}.face-stop-sign{display:grid;place-items:center;width:34px;height:36px;clip-path:polygon(27% 0,73% 0,100% 27%,100% 73%,73% 100%,27% 100%,0 73%,0 27%);background:var(--yellow);color:var(--yellowInk,var(--bg));font-size:25px;font-weight:900}.face-stop-seconds{font-size:25px;line-height:1.3;color:var(--yellow);text-align:right;font-variant-numeric:tabular-nums}.face-stop-banner:after{content:'';position:absolute;inset:auto 0 0;height:3px;background:var(--yellow);transform-origin:left;transform:scaleX(var(--stop-remaining,1));transition:transform .2s linear}.face-stop-banner.urgent{border-color:var(--red)}.face-stop-banner.urgent .face-stop-seconds{color:var(--red)}
.face-stop-banner{position:sticky;top:10px;z-index:5;scroll-margin-top:12px}
body.intui-ui[data-face-stop-owner=true] #faceCardModes{display:none!important}
body.intui-ui[data-face-stop-owner=true] .turn-announcement{display:none!important}
body.intui-ui #faceCardModes.has-stop-action{background:none;border:0;padding:0;gap:8px;overflow:visible;min-width:0}
body.intui-ui #faceCardModes.has-stop-action #faceGuess{background:var(--yellow);color:var(--yellowInk,var(--bg));border:1px solid var(--yellow);border-radius:11px;display:flex;gap:8px;align-items:center;justify-content:center;min-height:44px;padding:9px 13px;font-weight:850;box-shadow:none;line-height:1.35;white-space:normal}
body.intui-ui #faceCardModes.has-stop-action #faceGuess:after{content:attr(data-stop-time);font-size:11px;font-weight:650;opacity:.75;white-space:nowrap}body.intui-ui #faceCardModes.has-stop-action #faceGuess:disabled{opacity:.5;cursor:not-allowed}
body.intui-ui[data-face-stop=true] #faceQuestionForm,body.intui-ui[data-face-stop=true] #faceVoiceControls,body.intui-ui[data-face-stop=true] #matchClock{display:none!important}
body.intui-ui[data-face-stop=true] #faceBoard{scroll-margin-top:14px}
@media(max-width:760px){.face-stop-banner{grid-template-columns:28px minmax(0,1fr) 43px;padding:12px;gap:9px;margin-bottom:12px}.face-stop-sign{width:27px;height:29px;font-size:20px}.face-stop-banner strong{font-size:15px}.face-stop-banner small{font-size:12px}.face-stop-seconds{font-size:23px}body.intui-ui #faceCardModes.has-stop-action{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}body.intui-ui #faceCardModes.has-stop-action #faceGuess{font-size:13px;padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.face-stop-banner:after{transition:none}}