/* Interactive extras for the homepage and the solution pages. Each one is switched on per page
   from the CMS (markup in tmpl/landing/sky_play.php):
   hero_kiosk  a kiosk on a cloud in the hero scene
   hero_window a plane window in the hero scene, with a shade that opens and closes
   badge_demo  type a name, print a badge, ticket or page
   draw_demo   press a button, win the lucky draw
   chat_demo   messages arriving on a phone
   calc_demo   two sliders and a running total
   board_demo  tiles to tap: seats, rooms, orders, stock
   bid_demo    a short live auction
   game_demo   fly the paper plane
   quiz_demo   a short questionnaire with a result
   Loaded only on pages that use one of them. Styled with the page's own ink lines and blues. */
.sky-play { --ink: var(--toon-ink, #12365c); --line: var(--toon-line, 2.5px); --pop: var(--toon-pop, #a9dcff); }
.sky-play__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sky-play .sky-head { margin-bottom: 0; }
.sky-play__text { margin-top: 14px !important; max-width: 34em; font-size: 1.0625rem; line-height: 1.6; }
@keyframes play-bob { to { translate: 0 -10px; } }

/* ---- hero kiosk ---- */
.sky-scene__kiosk { --ink: var(--toon-ink, #12365c); --line: var(--toon-line, 2.5px); position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(170px, 40%, 236px); padding-bottom: 16%; transform: translate(-50%, -54%) rotate(var(--lean, 0deg)); transition: transform 0.35s; animation: play-bob 5s ease-in-out infinite alternate; }
.play-kiosk { position: relative; z-index: 2; padding: 8% 8% 10%; border-radius: 20px; background: #fff; border: var(--line) solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.play-kiosk__screen { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 11px; background: var(--sky-ocean, #1066af); border: var(--line) solid var(--ink); }
.play-kiosk__screen b { position: absolute; left: 0; right: 0; top: 0; height: 16%; background: var(--ink); }
.play-kiosk__screen b::after { content: ""; position: absolute; left: 9px; top: 50%; width: 34%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--toon-pop, #a9dcff); }
.play-kiosk__screen span { position: absolute; left: 10px; right: 8px; top: 25%; font: 600 clamp(1rem, 1.5vw, 1.3rem)/1.15 var(--sky-font-display, "Fredoka", sans-serif); color: #fff; opacity: 0; transform: translateY(14px); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
.play-kiosk__screen span.is-on { opacity: 1; transform: none; }
.play-kiosk__screen i { position: absolute; left: 10%; height: 9%; border-radius: 6px; background: #fff; border: 2px solid var(--ink); }
.play-kiosk__screen i:nth-of-type(1) { right: 10%; bottom: 33%; } .play-kiosk__screen i:nth-of-type(2) { right: 30%; bottom: 20%; background: var(--toon-pop, #a9dcff); } .play-kiosk__screen i:nth-of-type(3) { right: 46%; bottom: 7%; }
.play-kiosk u { display: block; width: 46%; height: 6px; margin: 9% auto 0; border-radius: 4px; background: var(--ink); }
.play-kiosk__neck { position: relative; z-index: 1; width: 22%; height: 54px; margin: -3px auto 0; background: #fff; border: var(--line) solid var(--ink); border-top: 0; }
.play-kiosk__cloud { position: absolute; left: -26%; right: -26%; bottom: -4%; aspect-ratio: 290 / 104; z-index: 3; background: var(--sky2d-b) center / contain no-repeat; }

/* ---- hero plane window ---- */
.sky-scene__window { --ink: var(--toon-ink, #12365c); position: absolute; left: 50%; top: 50%; z-index: 2; display: block; width: clamp(200px, 52%, 300px); aspect-ratio: 3 / 4; padding: 0; transform: translate(-50%, -52%); border-radius: 46% / 36%; background: #fff; border: 5px solid var(--ink); box-shadow: 0 10px 0 var(--ink), inset 0 0 0 10px #e8f1f8; cursor: pointer; }
.sky-scene__window:focus-visible { outline: 4px solid var(--toon-pop, #a9dcff); outline-offset: 6px; }
.play-window__sky { position: absolute; inset: 20px; display: block; overflow: hidden; border-radius: 44% / 34%; border: 5px solid var(--ink); background: linear-gradient(#2f8fdc, #9fd6f7 70%, #e6f6ff); }
.play-window__sky .sun { position: absolute; right: 16%; top: 12%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3); }
.play-window__sky .c { position: absolute; left: 100%; height: 22%; aspect-ratio: 2.4; background: var(--sky2d-b) center / contain no-repeat; animation: play-pass 9s linear infinite; }
.play-window__sky .c1 { top: 30%; }
.play-window__sky .c2 { top: 54%; height: 30%; background-image: var(--sky2d-c); animation-duration: 6.5s; animation-delay: -3s; }
.play-window__sky .c3 { top: 74%; height: 18%; background-image: var(--sky2d-d); animation-duration: 12s; animation-delay: -7s; }
@keyframes play-pass { to { transform: translateX(-560%); } }
.play-window__sky .wing { position: absolute; right: -6%; bottom: -4%; width: 78%; height: 30%; background: #fff; border: 5px solid var(--ink); border-radius: 80% 10% 0 0 / 100% 20% 0 0; transform: rotate(-10deg); }
.play-window__shade { position: absolute; left: 20px; right: 20px; top: 20px; display: block; height: calc((100% - 40px) * var(--sh, 0.72)); min-height: 34px; overflow: hidden; border-radius: 44% 44% 0 0 / 34% 34% 0 0; background: repeating-linear-gradient(#f2f6fa 0 14px, #dfe8f0 14px 16px); border: 5px solid var(--ink); transition: height 0.9s cubic-bezier(0.3, 1.1, 0.4, 1); }
.play-window__shade b { position: absolute; left: 50%; bottom: 8px; width: 58px; height: 12px; margin-left: -29px; border-radius: 8px; background: var(--ink); }

/* ---- badge printer ---- */
.play-form { display: grid; gap: 10px; max-width: 420px; margin-top: 26px; }
.play-form label { font-weight: 700; color: var(--sky-navy, #0f2f4d); }
.play-form input { min-height: 56px; padding: 0 18px; border-radius: 16px; border: var(--line) solid var(--ink); background: #fff; color: var(--sky-navy, #0f2f4d); font: 600 1.1rem var(--sky-font-body, system-ui, sans-serif); box-shadow: 0 4px 0 var(--ink); }
.play-form input:focus { outline: 0; box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--pop); }
.play-form .sky-btn { justify-self: start; margin-top: 6px; }
.play-printer { position: relative; width: min(100%, 320px); margin-inline: auto; }
.play-printer__body { position: relative; z-index: 2; padding: 18px 18px 16px; border-radius: 22px 22px 12px 12px; background: #fff; border: var(--line) solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.play-printer__body::before { content: ""; display: block; width: 44%; height: 8px; margin-bottom: 14px; border-radius: 6px; background: var(--pop); border: 2px solid var(--ink); }
.play-printer__slot { height: 14px; border-radius: 8px; background: var(--ink); }
.play-printer__led { position: absolute; right: 18px; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--pop); border: 2px solid var(--ink); }
.play-printer.is-busy .play-printer__led { animation: play-led 0.25s steps(2) infinite; }
@keyframes play-led { 50% { background: #fff; } }
.play-printer__out { position: relative; z-index: 1; height: 336px; margin: -12px 24px 0; overflow: hidden; }
.play-badge { position: absolute; left: 0; right: 0; top: 0; padding: 30px 16px 18px; border-radius: 0 0 18px 18px; background: #fff; border: var(--line) solid var(--ink); border-top: 0; text-align: center; color: var(--sky-navy, #0f2f4d); transform: translateY(-104%); }
.play-badge.is-printing { animation: play-feed 2.2s steps(22) forwards; }
.play-badge.is-done { transform: none; transform-origin: 50% 0; }
.play-badge.is-settle { animation: play-sway 1.5s ease-out 1; }
@keyframes play-feed { to { transform: translateY(0); } }
@keyframes play-sway { 22% { transform: rotate(2.4deg); } 48% { transform: rotate(-1.5deg); } 74% { transform: rotate(0.7deg); } }
.play-badge::before { content: ""; position: absolute; left: 50%; top: 11px; width: 52px; height: 9px; margin-left: -26px; border-radius: 6px; background: #dfeaf3; border: 2px solid var(--ink); }
.play-badge small { display: block; padding: 7px; border-radius: 8px; background: var(--sky-ocean, #1066af); color: #fff; font: 700 0.8rem/1 var(--sky-font-display, sans-serif); letter-spacing: 0.3em; }
.play-badge strong { display: block; margin: 16px 0 4px; font: 700 1.9rem/1.05 var(--sky-font-display, sans-serif); overflow-wrap: anywhere; }
.play-badge em { display: block; font-style: normal; font-weight: 600; font-size: 0.95rem; }
.play-qr { width: 100px; height: 100px; margin: 14px auto 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.play-qr i { background: var(--ink); } .play-qr i.o { background: transparent; }

/* ---- paper plane game ---- */
.play-game { overflow: hidden; border-radius: var(--sky-radius, 16px); border: var(--line) solid var(--ink); box-shadow: 0 6px 0 var(--ink); background: linear-gradient(180deg, var(--toon-sky-top, #0a4aa8) 0%, var(--toon-sky-mid, #2389e6) 60%, var(--toon-sky-low, #8fd3ff) 100%); }
.play-game__hud { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--ink); color: #fff; font: 600 0.95rem/1 var(--sky-font-display, sans-serif); }
.play-game__hud b { margin-left: 6px; font-variant-numeric: tabular-nums; }
.play-game canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: pointer; touch-action: manipulation; }
.play-game canvas:focus-visible { outline: 4px solid var(--pop); outline-offset: -4px; }

/* ---- questionnaire ---- */
.play-quiz { position: relative; padding: clamp(20px, 3vw, 34px); border-radius: var(--sky-radius, 16px); background: #fff; border: var(--line) solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.play-quiz__route { position: relative; display: flex; justify-content: space-between; margin: 6px 6px 26px; padding: 0; list-style: none; }
.play-quiz__route::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: var(--line) dotted var(--ink); }
.play-quiz__route li { position: relative; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: var(--line) solid var(--ink); transition: background 0.3s; }
.play-quiz__route li.is-done { background: var(--sky-ocean, #1066af); }
.play-quiz__plane { position: absolute; left: 6px; top: clamp(20px, 3vw, 34px); width: 38px; margin: -14px 0 0 -10px; transform: translateX(var(--x, 0px)); transition: transform 0.7s cubic-bezier(0.3, 1.3, 0.5, 1); pointer-events: none; }
.play-quiz__plane svg { display: block; width: 100%; height: auto; overflow: visible; }
.play-quiz__count { margin: 0 0 6px !important; font: 600 0.9rem/1 var(--sky-font-display, sans-serif); letter-spacing: 0.06em; color: var(--sky-ocean, #1066af); }
.play-quiz h3 { margin: 0 0 18px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; color: var(--sky-navy, #0f2f4d); }
.play-quiz__step:not([hidden]), .play-quiz__result:not([hidden]) { animation: play-in 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes play-in { from { opacity: 0; transform: translateX(26px); } }
.play-quiz__opts { display: grid; gap: 12px; }
.play-quiz__opts button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; width: 100%; padding: 12px 18px 12px 12px; border-radius: 999px; background: #fff; border: var(--line) solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: var(--sky-navy, #0f2f4d); font: 600 1.02rem/1.25 var(--sky-font-body, system-ui, sans-serif); text-align: left; cursor: pointer; transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.2s, box-shadow 0.2s; }
.play-quiz__opts button b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pop); border: 2px solid var(--ink); font: 700 1rem/1 var(--sky-font-display, sans-serif); }
.play-quiz__opts button:hover, .play-quiz__opts button:focus-visible { transform: translateY(-3px); background: #eef7ff; box-shadow: 0 7px 0 var(--ink); outline: 0; }
.play-quiz__opts button.is-picked { background: var(--sky-ocean, #1066af); color: #fff; transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.play-quiz__result p { margin: 0 0 20px !important; font-size: 1.0625rem; line-height: 1.6; }
.play-quiz__result .sky-note { margin-bottom: 8px !important; }
.play-quiz__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.play-puff { position: absolute; z-index: 3; border-radius: 50%; background: #fff; border: 2px solid #9cc3ea; pointer-events: none; }

/* ---- printer variants: a ticket with a tear line, and a web page in a browser window ---- */
.play-printer--ticket .play-badge { padding-top: 18px; }
.play-printer--ticket .play-badge::before { content: none; }
.play-printer--ticket .play-badge strong + em { padding-bottom: 14px; border-bottom: 2.5px dashed var(--ink); }
.play-printer--page .play-printer__body { padding: 14px 16px; border-radius: 18px 18px 0 0; box-shadow: none; }
.play-printer--page .play-printer__body::before { width: 46px; height: 10px; margin: 0; border: 0; border-radius: 0; background: radial-gradient(circle at 5px 5px, var(--ink) 4px, transparent 4.5px) 0 0 / 16px 10px repeat-x; }
.play-printer--page .play-printer__slot { position: absolute; left: 76px; right: 16px; top: 12px; height: 14px; background: #dfeaf3; }
.play-printer--page .play-printer__led { display: none; }
.play-printer--page .play-printer__out { height: 290px; margin: calc(var(--line) * -1) 0 0; }
.play-printer--page .play-badge { padding: 26px 20px 22px; border-top: var(--line) solid var(--ink); text-align: left; }
.play-printer--page .play-badge::before { content: none; }
.play-printer--page .play-badge small { display: inline-block; padding: 6px 10px; letter-spacing: 0.14em; }
.play-printer--page .play-badge strong { font-size: 1.6rem; }
.play-badge__btn { display: inline-block; margin: 16px 0 12px; padding: 9px 16px; border-radius: 999px; background: var(--sky-ocean, #1066af); color: #fff; font: 600 0.9rem/1 var(--sky-font-display, sans-serif); }

/* ---- shared card ---- */
.play-draw, .play-calc, .play-board, .play-bid { position: relative; padding: clamp(18px, 3vw, 32px); border-radius: var(--sky-radius, 16px); background: #fff; border: var(--line) solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
@keyframes play-pop { from { transform: scale(0.7); } }
@keyframes play-blink { 50% { opacity: 0.25; } }

/* ---- lucky draw ---- */
.play-draw { display: grid; gap: 16px; justify-items: center; overflow: hidden; text-align: center; }
.play-draw__screen { width: 100%; padding: 22px 12px 18px; border-radius: 14px; background: linear-gradient(180deg, var(--toon-sky-top, #0a4aa8), var(--sky-ocean, #1066af)); border: var(--line) solid var(--ink); }
.play-draw__reel { display: flex; justify-content: center; gap: 8px; }
.play-draw__reel b { display: grid; place-items: center; width: clamp(46px, 16%, 68px); aspect-ratio: 3 / 4; border-radius: 12px; background: #fff; border: var(--line) solid var(--ink); font: 700 clamp(1.9rem, 5vw, 2.8rem)/1 var(--sky-font-display, sans-serif); color: var(--sky-navy, #0f2f4d); font-variant-numeric: tabular-nums; }
.play-draw__reel b.is-set { background: var(--pop); animation: play-pop 0.35s cubic-bezier(0.3, 1.7, 0.5, 1); }
.play-draw__msg { min-height: 1.4em; margin: 16px 0 0 !important; font: 600 1.1rem/1.3 var(--sky-font-display, sans-serif); color: #fff; }
.play-draw.is-won .play-draw__msg { font-size: clamp(1.25rem, 3vw, 1.5rem); animation: play-pop 0.4s cubic-bezier(0.3, 1.7, 0.5, 1); }
.play-draw__ticket { display: inline-flex; align-items: center; gap: 12px; margin: 0 !important; padding: 9px 16px; border-radius: 12px; border: 2px dashed var(--ink); font-weight: 600; color: var(--sky-navy, #0f2f4d); }
.play-draw__ticket strong { font: 700 1.35rem/1 var(--sky-font-display, sans-serif); letter-spacing: 0.12em; }
.play-draw__after { max-width: 30em; margin: 0 !important; font-size: 0.98rem; line-height: 1.5; }

/* ---- messages on a phone ---- */
.play-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.play-chip { min-height: 44px; padding: 10px 16px; border-radius: 999px; background: #fff; border: var(--line) solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: var(--sky-navy, #0f2f4d); font: 600 1rem/1.25 var(--sky-font-display, sans-serif); text-align: left; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; }
.play-chip:hover, .play-chip:focus-visible { transform: translateY(-2px); background: #eef7ff; box-shadow: 0 6px 0 var(--ink); outline: 0; }
.play-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.play-phone { width: min(100%, 330px); margin-inline: auto; overflow: hidden; border-radius: 30px; background: #fff; border: var(--line) solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.play-phone__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--ink); color: #fff; font: 600 1rem/1.2 var(--sky-font-display, sans-serif); }
.play-phone__bar i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pop); border: 2px solid #fff; }
.play-phone__bar span { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 0.78rem; white-space: nowrap; }
.play-phone__thread { display: flex; flex-direction: column; gap: 10px; height: 340px; padding: 16px 14px; overflow-y: auto; background: #eaf5ff; }
.play-msg { align-self: flex-start; max-width: 88%; margin: 0 !important; padding: 10px 14px; border-radius: 6px 18px 18px 18px; background: #fff; border: 2px solid var(--ink); color: var(--sky-navy, #0f2f4d); font-size: 0.98rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; animation: play-in 0.35s cubic-bezier(0.3, 1.3, 0.5, 1); }
.play-msg--me { align-self: flex-end; border-radius: 18px 6px 18px 18px; background: var(--sky-ocean, #1066af); color: #fff; }
.play-msg.is-typing::after { content: "\2022\2009\2022\2009\2022"; font-weight: 700; letter-spacing: 2px; animation: play-blink 0.9s ease-in-out infinite; }

/* ---- sliders with a running total ---- */
.play-calc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; margin-bottom: 22px; }
.play-calc__row label { font-weight: 700; color: var(--sky-navy, #0f2f4d); }
.play-calc__row output { font: 700 1.3rem/1 var(--sky-font-display, sans-serif); color: var(--sky-ocean, #1066af); font-variant-numeric: tabular-nums; }
.play-calc__row input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--sky-ocean, #1066af); cursor: pointer; }
.play-calc__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 0 !important; padding-top: 18px; border-top: var(--line) dotted var(--ink); }
.play-calc__result strong { font: 700 clamp(2.6rem, 7vw, 3.8rem)/1 var(--sky-font-display, sans-serif); color: var(--sky-navy, #0f2f4d); font-variant-numeric: tabular-nums; }
.play-calc__result span { font: 600 1.15rem/1.2 var(--sky-font-display, sans-serif); color: var(--sky-ocean, #1066af); }
.play-calc__after { margin: 10px 0 0 !important; font-size: 0.98rem; line-height: 1.5; }

/* ---- tiles to tap ---- */
.play-board__mirrors { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.play-board__mirrors li { padding: 10px 12px; border-radius: 12px; background: #eaf5ff; border: 2px solid var(--ink); }
.play-board__mirrors b { display: block; font: 600 0.9rem/1.2 var(--sky-font-display, sans-serif); color: var(--sky-navy, #0f2f4d); }
.play-board__mirrors span { font-size: 0.95rem; font-weight: 700; color: var(--sky-ocean, #1066af); }
.play-board__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.play-tile { position: relative; display: grid; align-content: center; gap: 4px; min-height: 68px; padding: 10px 12px; border-radius: 14px; background: #fff; border: var(--line) solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: var(--sky-navy, #0f2f4d); font: 600 0.98rem/1.2 var(--sky-font-display, sans-serif); text-align: left; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s; }
.play-tile small { font: 600 0.8rem/1.2 var(--sky-font-body, system-ui, sans-serif); color: var(--sky-ocean, #1066af); }
.play-tile:hover, .play-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); outline: 0; }
.play-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.play-tile[data-s="1"] { background: var(--sky-ocean, #1066af); color: #fff; }
.play-tile[data-s="2"] { background: var(--pop); }
.play-tile[data-s="3"] { background: var(--ink); color: #fff; }
.play-tile[data-s="1"] small, .play-tile[data-s="3"] small { color: #fff; }
.play-tile[data-s="2"] small { color: var(--sky-navy, #0f2f4d); }
.play-tile:disabled { transform: none; background: #e8eef4; border-style: dashed; box-shadow: none; color: #51606d; cursor: not-allowed; }
.play-tile:disabled small { color: inherit; }
.play-board[data-mode="add"] .play-tile { padding-right: 44px; }
.play-board[data-mode="add"] .play-tile:not([data-s="0"]) { background: #eaf5ff; color: var(--sky-navy, #0f2f4d); }
.play-board[data-mode="add"] .play-tile:not([data-s="0"]) small { color: var(--sky-ocean, #1066af); }
.play-board[data-mode="add"] .play-tile:not([data-s="0"])::after { content: "\00d7" attr(data-s); position: absolute; right: 8px; top: 8px; display: grid; place-items: center; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--sky-ocean, #1066af); color: #fff; font: 700 0.85rem/1 var(--sky-font-display, sans-serif); }
.play-board--seats .play-board__tiles { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.play-board--seats .play-tile { min-height: 46px; padding: 6px 2px; border-radius: 12px 12px 6px 6px; text-align: center; }
.play-board--seats .play-tile small { display: none; }
.play-board__sum { min-height: 1.4em; margin: 16px 0 0 !important; font: 600 1.05rem/1.4 var(--sky-font-display, sans-serif); color: var(--sky-navy, #0f2f4d); }
.play-board__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.play-board__actions:empty { display: none; }
.sky-play .sky-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.play-board__done { margin: 14px 0 0 !important; padding: 12px 14px; border-radius: 12px; background: #eaf5ff; border: 2px solid var(--ink); font-weight: 600; line-height: 1.5; color: var(--sky-navy, #0f2f4d); animation: play-in 0.4s cubic-bezier(0.3, 1.3, 0.5, 1); }

/* ---- live auction ---- */
.play-bid { display: grid; gap: 12px; }
.play-bid__lot { margin: 0 !important; font: 600 1rem/1.3 var(--sky-font-display, sans-serif); color: var(--sky-ocean, #1066af); }
.play-bid__price { display: grid; gap: 4px; margin: 0 !important; font-weight: 600; }
.play-bid__price strong { font: 700 clamp(2.4rem, 7vw, 3.6rem)/1 var(--sky-font-display, sans-serif); color: var(--sky-navy, #0f2f4d); font-variant-numeric: tabular-nums; }
.play-bid__price strong.is-up { animation: play-pop 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); }
.play-bid__clock { height: 14px; overflow: hidden; border-radius: 999px; background: #e8eef4; border: 2px solid var(--ink); }
.play-bid__clock i { display: block; width: 100%; height: 100%; background: var(--sky-ocean, #1066af); transform: scaleX(var(--t, 1)); transform-origin: left; transition: transform 0.1s linear; }
.play-bid[data-lead="rival"] .play-bid__clock i { background: var(--ink); }
.play-bid__status { min-height: 3em; margin: 0 !important; font-weight: 600; line-height: 1.5; color: var(--sky-navy, #0f2f4d); }
.play-bid .sky-btn { justify-self: start; }
.sky-scene__kiosk { cursor: pointer; }

@media (max-width: 991.98px) {
  .sky-play__grid { grid-template-columns: minmax(0, 1fr); }
  .sky-scene--window .sky-scene__window { position: relative; left: auto; top: auto; width: 200px; margin: 8px auto 34px; transform: none; }
  .sky-scene--kiosk .sky-scene__kiosk { position: relative; left: auto; top: auto; width: 168px; margin: 4px auto 44px; padding-bottom: 50px; transform: rotate(var(--lean, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .play-window__sky .c, .sky-scene__kiosk, .play-badge.is-settle, .play-msg, .play-draw__reel b.is-set, .play-msg.is-typing::after { animation: none; }
  .play-badge.is-printing { animation: none; transform: none; }
}