.screen-event { --hud-ink: #193448; --hud-paper: #fffaf0; --hud-blue: #294f67; --hud-gold: #ffda78; --hud-mint: #a6ead0; --hud-body: Festival,sans-serif; --body: var(--hud-body); background: rgb(25, 52, 72); color: var(--hud-paper); min-height: 100dvh; }
.screen-event::before { display: none; }
.screen-event .game-top, .screen-event .game-footer { display: none; }
.screen-event .game-main { padding: 0 max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)); max-width: 1360px; }
.screen-event .play-screen { --deck-space: 190px; width: 100%; max-width: 1120px; margin: 0px auto; }
.screen-event .play-screen:is(.boxing-play, .diving-play, .hammer-play, .figure-skating-play, .pairs-skating-play, .ski-jump-play, .aerials-play, .curling-play) { --deck-space: 274px; }
.screen-event .play-screen.weightlifting-play { --deck-space: 332px; }
.screen-event .play-screen .play-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0px; min-height: 70px; flex-wrap: nowrap; }
.screen-event .play-event-title { display: flex; align-items: center; gap: 10px; min-width: 0px; }
.screen-event .play-event-icon { width: 32px; height: 32px; flex: 0 0 auto; }
.screen-event .play-event-icon svg { width: 100%; height: 100%; }
.screen-event .play-event-title h1 { margin: 0px; display: block; color: var(--hud-paper); font: 29px / 1 FestivalTitle, sans-serif; }
.screen-event #play-mode-label { display: block; margin: 4px 0px 0px; padding: 0px; color: rgb(190, 211, 218); background: none; font: 12px/1.2 var(--hud-body); }
.screen-event .play-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.screen-event .play-toolbar :is(.btn, .mode-select button, .play-options > summary) { border: 1px solid rgb(109, 139, 153); border-radius: 5px; min-height: 44px; padding: 9px 12px; font: 700 14px/1.1 var(--hud-body); color: var(--hud-paper); background: rgb(41, 79, 103); text-transform: none; white-space: nowrap; box-shadow: none; }
.screen-event .play-toolbar .btn:hover { background: rgb(59, 100, 123); color: var(--hud-paper); transform: none; }
.screen-event .play-toolbar .mode-select { display: flex; width: auto; gap: 0px; padding: 0px; margin: 0px; border: 0px; }
.screen-event .play-toolbar .mode-select button:first-child { border-radius: 5px 0px 0px 5px; }
.screen-event .play-toolbar .mode-select button:last-child { border-radius: 0px 5px 5px 0px; margin-left: -1px; }
.screen-event .play-toolbar .mode-select button.active { background: var(--hud-paper); color: var(--hud-ink); border-color: var(--hud-paper); position: relative; }
.screen-event .play-toolbar #pause-button[aria-pressed="true"] { background: var(--hud-gold); color: var(--hud-ink); border-color: var(--hud-gold); }
.screen-event .play-options { position: relative; }
.screen-event .play-options > summary { display: flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; }
.screen-event .play-options > summary::-webkit-details-marker { display: none; }
.screen-event .play-options[open] > summary { background: var(--hud-paper); color: var(--hud-ink); }
.screen-event .play-options:not([open]) .play-options-panel { display: none; }
.screen-event .play-options-panel { position: absolute; right: 0px; top: calc(100% + 6px); z-index: 20; display: grid; gap: 6px; width: 184px; padding: 8px; background: var(--hud-paper); border: 2px solid var(--hud-ink); border-radius: 6px; }
.screen-event .play-options-panel p { margin: 2px 0px 6px; color: rgb(82, 106, 118); font: 12px/1.35 var(--hud-body); }
.screen-event .play-toolbar .play-options-panel .btn { width: 100%; color: var(--hud-ink); background: rgb(233, 238, 229); border-color: rgb(185, 201, 199); white-space: normal; }
.screen-event :is(button, summary, canvas):focus-visible { outline: 3px solid var(--hud-gold); outline-offset: 3px; }
.screen-event .play-options-panel button:focus-visible { outline-color: rgb(181, 68, 55); }
.screen-event .play-screen .play-viewport { width: min(100%,calc((100dvh - var(--deck-space)) * 16/9)); margin: 0px auto; border: 2px solid rgb(155, 183, 188); outline: 0px; border-radius: 6px; overflow: hidden; background: var(--hud-ink); }
.screen-event .play-screen .play-viewport canvas { display: block; width: 100%; height: auto; }
.screen-event .play-screen .play-deck { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 1120px; padding: 12px 0px 0px; min-height: 0px; margin: 0px auto; }
.screen-event .play-screen .play-deck .live-message { display: flex; align-items: center; flex: 1 1 0%; gap: 10px; width: auto; min-width: 0px; min-height: 76px; padding: 10px 14px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 4px solid var(--hud-gold); outline: 0px; border-radius: 0px; background: transparent; color: var(--hud-paper); text-align: left; }
.screen-event .cue-speaker { display: none; }
.screen-event .cue-copy { min-width: 0px; flex: 1 1 0%; }
.screen-event .play-screen .play-deck #event-cue { font: 700 21px/1.15 var(--hud-body); color: var(--hud-paper); text-transform: none; margin: 0px; overflow-wrap: break-word; }
.screen-event .play-screen .play-deck #event-status { font: 13px/1.3 var(--hud-body); color: rgb(188, 209, 216); margin: 5px 0px 0px; overflow-wrap: break-word; }
.screen-event .play-screen .live-message[data-tone="good"] { border-color: var(--hud-mint); background: transparent; }
.screen-event .play-screen .live-message[data-tone="miss"] { border-color: rgb(244, 154, 134); background: transparent; }
.screen-event .play-screen .live-message[data-tone="good"] #event-cue { color: rgb(185, 241, 212); }
.screen-event .play-screen .live-message[data-tone="miss"] #event-cue { color: rgb(255, 177, 157); }
.screen-event .play-deck #touch-controls { flex: 1.1 1 0%; min-width: 0px; margin: 0px; gap: 10px; }
.screen-event .play-screen .play-deck #touch-controls:is([data-layout="hammer"], [data-layout="boxing"], [data-layout="diving"], [data-layout="figure-skating"], [data-layout="pairs-skating"], [data-layout="ski-jump"], [data-layout="aerials"], [data-layout="curling"]) { grid-template-rows: repeat(2, minmax(76px, auto)); }
.screen-event .play-screen .play-deck #touch-controls .engine-control { position: relative; min-width: 0px; min-height: 80px; padding: 10px 8px; border-width: 2px 2px 5px; border-style: solid; border-color: rgb(164, 189, 197) rgb(164, 189, 197) rgb(141, 168, 179); border-image: none; border-radius: 10px; background: var(--hud-paper); color: var(--hud-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; line-height: 1.1; white-space: normal; text-transform: none; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; transition: background-color 0.08s, border-color 0.08s, transform 0.08s; box-shadow: none; }
.screen-event .play-deck #touch-controls .engine-control[data-label] { font-size: 0px !important; }
.screen-event .engine-control[data-label]::before { content: attr(data-face); font: 32px / 1 FestivalTitle, sans-serif; white-space: normal; text-transform: none; }
.screen-event .engine-control[data-key]::after { content: attr(data-key); font: 700 11px/1.2 var(--hud-body); letter-spacing: 0.2px; opacity: 0.7; }
.screen-event .engine-control[data-hint]:not([data-hint=""])::after { content: attr(data-hint); opacity: 1; font-size: 12px; }
.screen-event .play-screen .play-deck #touch-controls .engine-control[data-action="action"] { background: var(--hud-gold); border-color: rgb(223, 183, 92) rgb(223, 183, 92) rgb(183, 142, 63); }
.screen-event .play-screen .play-deck #touch-controls .engine-control.next-stroke { border-top-color: ; border-right-color: ; border-left-color: ; border-bottom-color: rgb(195, 157, 81); }
.screen-event .play-screen .play-deck #touch-controls .engine-control:is(.shot-ready, .on-beat, .boxing-open) { background: var(--hud-mint); color: var(--hud-ink); border-color: rgb(230, 255, 240) rgb(230, 255, 240) rgb(108, 168, 147); }
.screen-event .play-screen .play-deck #touch-controls .engine-control.boxing-tell { background: var(--hud-gold); color: var(--hud-ink); border-color: rgb(255, 250, 240) rgb(255, 250, 240) rgb(195, 157, 81); }
.screen-event .play-screen .play-deck #touch-controls .engine-control:is(.is-held, .stroke-good) { background: rgb(189, 235, 220); color: var(--hud-ink); transform: translateY(2px); border-bottom-width: 3px; }
.screen-event .play-screen .play-deck #touch-controls .engine-control:is(.stroke-miss, .hammer-wrong, .rowing-late, .halfpipe-late) { background: rgb(250, 196, 179); color: var(--hud-ink); border-color: rgb(248, 221, 206) rgb(248, 221, 206) rgb(188, 120, 102); }
.screen-event .play-screen .play-deck #touch-controls .engine-control:disabled { background: rgb(41, 71, 88); color: rgb(167, 191, 201); border-color: rgb(87, 115, 129) rgb(87, 115, 129) rgb(66, 97, 112); opacity: 1; transform: none; }
.screen-event .play-screen .play-deck #touch-controls .engine-control[hidden] { display: none; }
.screen-event .weightlifting-play .play-deck .live-message { padding: 10px; background: var(--hud-paper); color: var(--hud-ink); border: 2px solid rgb(146, 174, 184); border-radius: 6px; display: block; }
.screen-event .weightlifting-play .play-deck #event-cue { color: var(--hud-ink); font-size: 17px; }
.screen-event .weightlifting-play .play-deck #event-status { color: rgb(82, 106, 118); }
.screen-event .weightlifting-play #timing-cue { border: 0px; padding: 0px; border-radius: 0px; }
.screen-event .weightlifting-play #timing-cue :is(.timing-label, .timing-legend, .balance-help, .balance-help strong, .balance-help span, .balance-help small) { color: var(--hud-ink); font-family: var(--hud-body); text-transform: none; }
.screen-event .weightlifting-play .timing-label { font-weight: 700; }
.screen-event .weightlifting-play .timing-legend { font-size: 11px; }
.screen-event .weightlifting-play .balance-help strong { font-size: 19px; }
.screen-event #boxing-bracket { max-width: 1120px; margin: 16px auto 0px; }
.poke-ui .lobby-scene { min-height: 0px; }
.poke-ui .lobby-title { padding-top: 8px; }
.poke-ui .lobby-title > span { text-transform: none; letter-spacing: 1px; }
.poke-ui .lobby-title h1 { margin-top: 14px; }
.lobby-reel { width: 100%; max-width: 780px; margin: 20px auto 0px; border: 3px solid rgb(25, 52, 72); background: rgb(25, 52, 72); overflow: hidden; }
.lobby-reel canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.lobby-reel-caption { display: flex; justify-content: space-between; align-items: stretch; border-top: 2px solid rgb(138, 175, 185); gap: 10px; padding: 3px 8px; }
.lobby-reel-caption button { color: rgb(255, 249, 232); background: none; border: 0px; min-height: 44px; text-transform: none; font: 18px Festival, monospace; }
.lobby-reel-caption .reel-play { display: flex; align-items: center; gap: 10px; text-align: left; }
.reel-play svg { width: 23px; height: 23px; }
.reel-play b { color: rgb(255, 218, 120); }
.lobby-reel-caption .reel-pause { font-size: 13px; color: rgb(193, 216, 220); padding: 5px 8px; }
.lobby-reel-caption button:hover { color: rgb(255, 218, 120); }
@media (max-width: 720px) {
  .screen-event .game-main { padding: 0 max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)); }
  .screen-event .play-screen { --deck-space: 234px; }
  .screen-event .play-screen:is(.boxing-play, .diving-play, .hammer-play, .figure-skating-play, .pairs-skating-play, .ski-jump-play, .aerials-play, .curling-play) { --deck-space: 304px; }
  .screen-event .play-screen.weightlifting-play { --deck-space: 384px; }
  .screen-event .play-screen .play-toolbar { flex-direction: column; align-items: stretch; gap: 7px; padding: 9px 0px; min-height: 0px; }
  .screen-event .play-event-title { gap: 8px; }
  .screen-event .play-event-icon { width: 23px; height: 23px; }
  .screen-event .play-event-title h1 { font-size: 25px; }
  .screen-event .play-event-title > div { display: flex; align-items: baseline; flex: 1 1 0%; gap: 10px; justify-content: space-between; min-width: 0px; }
  .screen-event #play-mode-label { font-size: 11px; margin: 0px; white-space: nowrap; }
  .screen-event .play-toolbar-actions { gap: 6px; justify-content: space-between; }
  .screen-event .play-toolbar .mode-select { margin-right: auto; }
  .screen-event .play-toolbar :is(.btn, .mode-select button, .play-options > summary) { min-height: 44px; font-size: 13px; padding: 8px 10px; }
  .screen-event .play-screen .play-viewport { width: min(100%,calc((100dvh - var(--deck-space)) * 640/660)); border-radius: 4px; }
  .screen-event .play-screen .play-deck { flex-direction: column; gap: 7px; padding: 8px 0px 0px; }
  .screen-event .play-screen .play-deck .live-message { width: 100%; flex: 0 0 auto; padding: 4px 10px; min-height: 47px; }
  .screen-event .play-screen .play-deck #event-cue { font-size: 18px; line-height: 1.2; }
  .screen-event .play-screen .play-deck #event-status { font-size: 12px; margin-top: 3px; }
  .screen-event .play-screen .play-deck #touch-controls { width: 100%; flex: 0 0 auto; gap: 8px; max-width: none; margin: 0px; }
  .screen-event .play-screen .play-deck #touch-controls .engine-control { min-height: 74px; padding: 7px 3px; }
  .screen-event .play-screen .play-deck #touch-controls:is([data-layout="hammer"], [data-layout="boxing"], [data-layout="diving"], [data-layout="figure-skating"], [data-layout="pairs-skating"], [data-layout="ski-jump"], [data-layout="aerials"], [data-layout="curling"]) { grid-template-rows: repeat(2, minmax(60px, auto)); }
  .screen-event .play-screen .play-deck #touch-controls:is([data-layout="hammer"], [data-layout="diving"], [data-layout="boxing"], [data-layout="figure-skating"], [data-layout="pairs-skating"], [data-layout="ski-jump"], [data-layout="aerials"], [data-layout="curling"]) .engine-control { min-height: 60px; }
  .screen-event .engine-control[data-label]::before { font-size: 29px; }
  .screen-event .engine-control[data-key]::after { display: none; }
  .screen-event .engine-control[data-hint]:not([data-hint=""])::after { display: block; font-size: 11px; }
  .screen-event .weightlifting-play .play-deck .live-message { padding: 8px 10px; }
  .poke-ui .lobby-title { padding-top: 5px; }
  .lobby-reel { margin-top: 12px; max-height: none; }
  .lobby-reel canvas { aspect-ratio: 16 / 9; object-fit: cover; object-position: center center; }
  .lobby-reel-caption button { font-size: 16px; }
}
@media (pointer: coarse) {
  .screen-event .engine-control[data-key]::after { display: none; }
  .screen-event .engine-control[data-hint]:not([data-hint=""])::after { display: block; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .screen-event .game-main { padding: 0 max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)); }
  .screen-event .play-screen { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(202px, 28%); gap: 6px 12px; }
  .screen-event .play-screen .play-toolbar { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 52px; padding: 4px 0px; }
  .screen-event .play-event-title h1 { font-size: 25px; }
  .screen-event .play-event-icon { width: 26px; height: 26px; }
  .screen-event #play-mode-label { font-size: 10px; margin-top: 2px; }
  .screen-event .play-event-title > div { display: block; }
  .screen-event .play-toolbar :is(.btn, .mode-select button, .play-options > summary) { min-height: 44px; padding: 6px 10px; font-size: 12px; }
  .screen-event .play-screen .play-viewport { width: min(100%, 177.778dvh - 120.889px); align-self: start; }
  .screen-event .play-screen .play-deck { flex-direction: column; padding: 0px; gap: 8px; min-height: 0px; width: 100%; }
  .screen-event .play-screen .play-deck .live-message { flex: 0 0 auto; width: 100%; padding: 5px 8px; min-height: 55px; }
  .screen-event .play-screen .play-deck #event-cue { font-size: 17px; }
  .screen-event .play-screen .play-deck #event-status { font-size: 11px; display: block; }
  .screen-event .play-screen .play-deck #touch-controls { width: 100%; max-width: none; min-height: 0px; flex: 0 0 auto; gap: 6px; }
  .screen-event .play-screen .play-deck #touch-controls .engine-control { min-height: 56px; padding: 5px 2px; }
  .screen-event .play-screen .play-deck #touch-controls:is([data-layout="hammer"], [data-layout="boxing"], [data-layout="diving"], [data-layout="figure-skating"], [data-layout="pairs-skating"], [data-layout="ski-jump"], [data-layout="aerials"], [data-layout="curling"]) { grid-template-rows: repeat(2, minmax(54px, auto)); }
  .screen-event .boxing-play .play-deck #touch-controls, .screen-event .diving-play .play-deck #touch-controls[data-layout="diving"] { grid-template-columns: repeat(3, minmax(0px, 1fr)); grid-template-rows: repeat(2, 54px); }
  .screen-event .boxing-play #touch-controls [data-action="left"] { grid-area: 1 / 1; }
  .screen-event .boxing-play #touch-controls [data-action="down"] { grid-area: 1 / 2; }
  .screen-event .boxing-play #touch-controls [data-action="right"] { grid-area: 1 / 3; }
  .screen-event .boxing-play #touch-controls [data-action="action"] { grid-area: 2 / 1 / auto / -1; }
  .screen-event .diving-play #touch-controls [data-action="action"] { grid-area: 1 / 1; }
  .screen-event .diving-play #touch-controls [data-action="up"] { grid-area: 1 / 2; }
  .screen-event .diving-play #touch-controls [data-action="left"] { grid-area: 2 / 1; }
  .screen-event .diving-play #touch-controls [data-action="down"] { grid-area: 2 / 2; }
  .screen-event .diving-play #touch-controls [data-action="right"] { grid-area: 2 / 3; }
  .screen-event .engine-control[data-label]::before { font-size: 22px; }
  .screen-event .engine-control[data-key]::after { display: none; }
  .screen-event .engine-control[data-hint]:not([data-hint=""])::after { display: block; font-size: 10px; }
  .screen-event #boxing-bracket { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-event .play-screen .play-deck #touch-controls .engine-control { transition: none; transform: none !important; }
}

/* A completed balance lock has a symbol as well as a color. */
.screen-event .weightlifting-play .balance-locks i { position:relative; }
.screen-event .weightlifting-play .balance-locks i.lit:after { content:"\2713"; position:absolute; inset:0; width:auto; height:auto; background:none; display:grid; place-items:center; color:#193448; font:700 17px/1 var(--hud-body); }