/* 批注修订：品牌、聚光开奖、中奖布局与大屏用途抽屉。 */
.brand-logo { width: 84px; height: 47px; object-fit: contain; filter: brightness(0) invert(1); }
.brand { gap: 20px; }
.brand > span { border-left: 1px solid #ffffff30; padding-left: 20px; font-size: 20px; }
.brand small { font-size: 9px; letter-spacing: 3px; }
.screen-logo { width: 86px; height: 48px; object-fit: contain; filter: brightness(0) invert(1); }
.event-summary { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.event-summary h2 { margin-bottom: 10px; }
.activity-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.activity-actions .button { min-height: 44px; padding: 11px 8px; font-size: 12px; font-weight: 600; }
.screen-action { background: #eef2fa; border-color: #cbd5ea; color: var(--navy); }
.end-action { background: #fff; border-color: #d9b6b0; color: var(--red); }
.screen-action:active { background: #e2e9f5; }
.end-action:active { background: #fceaea; }
.round-card-head > span { max-width: 140px; overflow-wrap: anywhere; }
.big-screen { min-height: 560px; }
.screen-event-name { margin: 12px 0 0; font-size: 12px; text-align: center; letter-spacing: 2px; color: #d7deea; }
.screen-stage { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-content: center; align-items: center; min-height: 330px; flex: 1; }
.prize-panel { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 1; text-align: center; transition: opacity .6s, transform .9s; }
.screen-title { margin-top: 19px; }
.screen-title h2 { font-size: 28px; }
.screen-round-meta { font-size: 10px; line-height: 1.8; }
.prize-art { height: 105px; margin: 12px 0 7px; }
.winner-zone { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; min-width: 0; padding: 0 12px 12px; }
.screen-result-label { margin: 5px 0 18px; color: #d7deea; font-size: 12px; }
.screen-winners { overflow: auto; max-height: 285px; }
.screen-winners .winner-card.waiting { opacity: 1; }
.screen-bottom { padding-top: 18px; }
.has-results .screen-stage { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-content: center; min-height: 355px; }
.has-results .prize-panel { grid-column: 1; grid-row: 1; border-right: 1px solid #f0c87835; padding-right: 16px; }
.has-results .screen-title { margin: 0; }
.has-results .screen-title h2 { text-wrap: balance; font-size: 20px; letter-spacing: 2px; line-height: 1.6; }
.has-results .screen-round-meta { font-size: 9px; line-height: 1.8; color: #cbd4e9; margin-top: 12px; }
.has-results .prize-art { height: 110px; margin-top: 15px; }
.has-results .prize-art svg, .has-results .prize-art img { width: 80px; height: 100px; }
.has-results .winner-zone { grid-column: 2; grid-row: 1; padding: 14px 0; }
.has-results .screen-result-label { color: #f0c878; font-size: 16px; letter-spacing: 6px; margin-bottom: 20px; }
.has-results .screen-winners { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 12px; padding: 4px; }
.has-results .winner-card { min-width: 0; max-width: none; min-height: 100px; padding: 18px 8px; background: linear-gradient(145deg, #f0c87818, #fff0); border: 1px solid #f0c87870; position: relative; overflow: hidden; }
.has-results .winner-card:before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, #ffffff17 50%, transparent 75%); transform: translateX(-120%); animation: nameSheen 1.1s .5s both; }
.has-results .winner-card small { font-size: 9px; letter-spacing: 3px; margin-bottom: 10px; }
.has-results .winner-card strong { font-size: clamp(22px, 2.5vw, 34px); font-weight: 500; line-height: 1.35; }
.settling .prize-panel { animation: prizeMoveLeft 1.1s cubic-bezier(.16,1,.3,1) both; }
.settling .winner-zone { animation: winnersArrive 1.15s cubic-bezier(.16,1,.3,1) both; }
.settling .winner-card:nth-child(2) { animation-delay: .15s; }
.settling .winner-card:nth-child(3) { animation-delay: .3s; }
.reveal-flash { position: absolute; inset: -50px; background: radial-gradient(ellipse, #f0c87899 0, #f0c87825 30%, transparent 65%); pointer-events: none; opacity: 0; z-index: 4; }
.settling .reveal-flash { animation: revealFlash 1s ease-out both; }
#draw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s; }
.drawing #draw-canvas { opacity: 1; }
.draw-show { position: absolute; left: 50%; top: 43%; width: 240px; height: 240px; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .5s, transform .7s cubic-bezier(.16,1,.3,1); }
.drawing .draw-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.draw-show > span { font-size: 11px; letter-spacing: 5px; color: #f0c878; position: relative; z-index: 2; }
.draw-show > strong { font-family: var(--serif); font-size: 90px; font-weight: 400; color: #fff4d8; line-height: 1.25; text-shadow: 0 0 25px #f0c87860, 0 0 70px #f0c87845; position: relative; z-index: 2; }
.draw-show > .draw-show-note { font-size: 8px; letter-spacing: 6px; color: #d7deea; }
.draw-orbit { position: absolute; inset: 0; border: 1px solid #f0c87845; border-radius: 50%; box-shadow: inset 0 0 40px #f0c87807, 0 0 40px #f0c87806; }
.orbit-one { border-top: 2px solid #f0c878; border-bottom: 2px solid #f0c878; animation: orbitSpin 4s linear infinite; }
.orbit-two { inset: 13px; border: 1px dashed #f0c87855; animation: orbitSpin 11s linear reverse infinite; }
.orbit-three { inset: -17px; border: 1px solid #ffffff0d; border-left-color: #f0c87870; border-right-color: #f0c87870; animation: orbitSpin 8s linear infinite; }
.drawing .prize-panel { opacity: 0; transform: scale(.7); }
.drawing .winner-zone { grid-column: 1 / -1; grid-row: 1; align-self: end; padding-top: 245px; }
.drawing .screen-result-label { display: none; }
.drawing .screen-winners { gap: 8px; min-height: 50px; max-height: 100px; }
.drawing .winner-card { min-width: 70px; min-height: 44px; max-width: 140px; padding: 8px 10px; border-color: #f0c87835; border-radius: 24px; background: #ffffff05; animation: none; }
.drawing .winner-card strong { font-size: 15px; animation: none; }
.drawing .winner-card.kept { opacity: .7; }
.drawing .winner-card small { font-size: 8px; }
.drawing .prize-art { animation: none; }
.screen-drawer { margin: auto auto 0; width: 480px; max-width: 100%; padding: 25px 28px max(28px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 60px #18285820; animation: drawerEnter .3s ease-out; }
.drawer-handle { width: 40px; height: 4px; background: #d9d8d3; border-radius: 4px; margin: -12px auto 22px; }
.drawer-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #eef2fa; color: var(--navy); font-size: 27px; margin-bottom: 15px; }
.screen-drawer h2 { font-size: 25px; margin-top: 0; }
.drawer-description { font-size: 14px; line-height: 1.9; margin: 0 0 7px; color: var(--ink); }
.drawer-detail { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 24px; }
.screen-drawer .text-field { font-size: 11px; min-height: 44px; background: var(--paper); }
.drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.drawer-actions .button { text-align: center; font-size: 14px; min-height: 46px; }
.participant-phone .phone-content { position: relative; min-height: 620px; }
.my-win.win-ticket { text-align: left; background: var(--white); border: 1px solid #d7c29d; padding: 0 20px 18px; position: relative; overflow: hidden; animation: none; }
.ticket-top { margin: 0 -20px 18px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; color: #f0c878; background: var(--navy); font-size: 11px; letter-spacing: 2px; }
.my-win.win-ticket h3 { color: var(--navy); font-size: 23px; line-height: 1.5; margin: 12px 0 8px; }
.my-win.win-ticket .ticket-name { color: var(--ink); font-size: 14px; margin: 0 0 12px; }
.my-win.win-ticket .ticket-help { color: var(--muted); font-size: 11px; padding-top: 13px; border-top: 1px dashed #d7c29d; margin: 0; }
.my-win.win-ticket .link-button { font-size: 10px; color: var(--brass); margin-top: 7px; }
.win-celebration { position: absolute; z-index: 5; top: 12px; left: 12px; right: 12px; min-height: 520px; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #354675, #182858 60%); color: var(--white); text-align: center; padding: 53px 20px 25px; box-shadow: 0 20px 50px #18285845; isolation: isolate; animation: celebrationEnter .7s cubic-bezier(.16,1,.3,1) both; }
.win-rays { position: absolute; inset: -55%; z-index: -1; background: repeating-conic-gradient(from 0deg, transparent 0deg 14deg, #f0c87808 14deg 23deg, transparent 23deg 30deg); animation: orbitSpin 36s linear infinite; }
.win-overline { font-size: 11px; letter-spacing: 5px; color: #f0c878; }
.win-medal { width: 110px; height: 110px; margin: 25px auto 10px; position: relative; display: grid; place-items: center; }
.win-medal:before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #f0c87850; box-shadow: 0 0 0 10px #f0c87807, 0 0 55px #f0c87830; animation: medalGlow 2s ease-in-out infinite; }
.win-medal svg { width: 100px; height: 100px; filter: drop-shadow(0 6px 18px #f0c87835); animation: medalArrive 1.1s cubic-bezier(.16,1,.3,1) both; }
.win-celebration h2 { font: 39px/1.4 var(--serif); color: #fff0cd; letter-spacing: 6px; margin: 15px 0; text-shadow: 0 0 24px #f0c87835; }
.win-prize-line { height: 1px; width: 80px; background: linear-gradient(90deg, transparent, #f0c878, transparent); margin: 17px auto; }
.win-celebration h3 { font: 24px/1.6 var(--serif); color: #f0c878; font-weight: 400; margin: 12px 0 7px; overflow-wrap: anywhere; }
.win-celebration p { color: #d7deea; font-size: 11px; line-height: 1.8; margin: 0; }
.win-celebration .button { margin-top: 27px; background: linear-gradient(110deg, #f0c878, #d8ad66); color: #2d2440; border: 1px solid #f5d79f; width: 100%; font-size: 13px; min-height: 45px; box-shadow: 0 7px 22px #c0883b20; }
.win-sparkles { position: absolute; inset: 0; pointer-events: none; }
.win-sparkles i { position: absolute; left: var(--x); top: -20px; width: 5px; height: 11px; background: #f0c878; transform: rotate(var(--turn)); animation: winPetals 3.4s var(--delay) ease-out infinite; }
.win-sparkles i:nth-child(3n) { background: #fff5d4; width: 4px; height: 4px; }
.win-sparkles i:nth-child(2n) { opacity: .55; }
.workspace.single-screen .big-screen { min-height: 76vh; }
.workspace.single-screen .screen-stage { min-height: 390px; }
.workspace.single-screen .has-results .screen-stage { grid-template-columns: 220px minmax(0, 1fr); gap: 38px; }
.workspace.single-screen .has-results .screen-title h2 { font-size: 27px; }
.workspace.single-screen .has-results .winner-card { min-width: 0; min-height: 130px; max-width: none; }
.workspace.single-screen .has-results .winner-card strong { font-size: clamp(26px, 3.2vw, 48px); }
.workspace.single-screen .has-results .screen-winners { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.workspace.single-screen .has-results .prize-art { height: 145px; }
.workspace.single-screen .has-results .prize-art svg, .workspace.single-screen .has-results .prize-art img { height: 125px; width: 100px; }
.fullscreen-mode .screen-logo { width: 105px; height: 58px; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes prizeMoveLeft { from { transform: translateX(var(--prize-shift, 220px)) scale(1.18); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes winnersArrive { 0%, 28% { opacity: 0; transform: translateY(25px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes revealFlash { 0% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes nameSheen { to { transform: translateX(120%); } }
@keyframes drawerEnter { from { transform: translateY(100%); } to { transform: none; } }
@keyframes celebrationEnter { from { opacity: 0; transform: translateY(30px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes medalArrive { from { transform: scale(.15) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes medalGlow { 50% { box-shadow: 0 0 0 15px #f0c87805, 0 0 65px #f0c87840; } }
@keyframes winPetals { 0% { transform: translateY(-20px) rotate(var(--turn)); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(570px) rotate(420deg); opacity: 0; } }
@media (max-width: 1100px) {
  .screen-stage, .has-results .screen-stage { grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
  .has-results .prize-panel { padding-right: 12px; }
  .has-results .screen-title h2 { font-size: 17px; }
  .has-results .screen-winners { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 9px; }
  .has-results .winner-card strong { font-size: 25px; }
  .has-results .winner-card { min-height: 89px; }
  .has-results .screen-result-label { font-size: 14px; }
}
@media (max-width: 760px) {
  .brand-logo { width: 64px; height: 36px; }
  .brand { gap: 12px; }
  .brand > span { font-size: 17px; padding-left: 12px; }
  .brand small { font-size: 7px; letter-spacing: 2px; }
  .screen-logo { width: 72px; height: 40px; }
  .event-summary h2 { font-size: 20px; }
  .screen-event-name { font-size: 10px; letter-spacing: 1px; margin-top: 17px; }
  .big-screen { min-height: 560px; }
  .screen-stage { min-height: 325px; }
  .has-results .screen-stage { grid-template-columns: 96px minmax(0, 1fr); min-height: 345px; gap: 11px; }
  .has-results .prize-panel { padding-right: 10px; }
  .has-results .screen-title h2 { font-size: 15px; letter-spacing: 1px; }
  .has-results .screen-round-meta { font-size: 8px; letter-spacing: 0; }
  .has-results .prize-art { height: 100px; }
  .has-results .prize-art svg, .has-results .prize-art img { width: 65px; height: 90px; }
  .has-results .screen-winners { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 9px; max-height: 300px; }
  .has-results .winner-card { min-height: 77px; padding: 12px 6px; }
  .has-results .winner-card small { font-size: 8px; letter-spacing: 2px; }
  .has-results .winner-card strong { font-size: 24px; }
  .has-results .screen-result-label { letter-spacing: 3px; font-size: 13px; margin-bottom: 13px; }
  .draw-show { width: 200px; height: 200px; }
  .draw-show > strong { font-size: 76px; }
  .drawing .winner-zone { padding-top: 230px; }
  .drawing .winner-card { min-width: 63px; padding: 8px 6px; }
  .drawing .winner-card strong { font-size: 13px; }
  .screen-drawer { padding-left: 24px; padding-right: 24px; }
  .workspace.single-screen .has-results .screen-stage { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .workspace.single-screen .has-results .screen-title h2 { font-size: 17px; }
  .workspace.single-screen .has-results .prize-art svg, .workspace.single-screen .has-results .prize-art img { width: 70px; height: 95px; }
  .workspace.single-screen .has-results .screen-winners { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .workspace.single-screen .has-results .winner-card { min-height: 80px; }
  .workspace.single-screen .has-results .winner-card strong { font-size: 24px; }
  .workspace.single-screen .has-results .prize-art { height: 105px; }
}

/* 连接状态属于各自的业务页面，不占用原型工作台外层。 */
.page-connection { display: flex; align-items: flex-start; gap: 9px; padding: 12px 16px; background: #faeeda; color: #854f0b; font-size: 11px; line-height: 1.7; border-bottom: 1px solid #ead49a; }
.page-connection small { display: block; font-size: 9px; color: #96713d; margin-top: 2px; }
.reconnect-spinner { width: 12px; height: 12px; border: 1.5px solid #c0883b40; border-top-color: #854f0b; border-radius: 50%; flex: 0 0 auto; margin-top: 3px; animation: orbitSpin 1s linear infinite; }
.big-screen > .page-connection { margin: 14px 0 0; border: 1px solid #f0c87860; border-radius: 5px; background: #f0c87812; color: #f0dba7; padding: 10px 13px; }
.big-screen > .page-connection small { color: #d7deea; }
.big-screen .reconnect-spinner { border-color: #f0c87840; border-top-color: #f0c878; }
.screen-connection-meta { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.screen-top .live-label { color: #c5e3d7; }
@media (max-width: 760px) { .screen-connection-meta { gap: 8px; }.screen-top .live-label { font-size: 9px; }.page-connection { font-size: 11px; } }