/* dev/proposals/miles_offer/ck/ck.css — the operator's BUY MILES picture (cockpit backdrop) rebuilt as a page.
   backdrop.jpg is the only image: the cockpit and sky, with no interface part on it. Every frame, key, badge, emblem and icon
   is an SVG shape (art.js) styled here; every word, number and price is live HTML. Lengths are pixels of the picture at
   1920x1080; ck.js scales the stage to the window. ck.fit.css holds each text's size, spacing and position, computed from
   the picture's measured text boxes (boxes.json).
   Type: Russo One (the game's own face) and Albert Sans, both under the SIL Open Font License 1.1 (fonts/OFL-RussoOne.txt, fonts/OFL-AlbertSans.txt). */
@font-face { font-family: 'Russo One'; src: url('fonts/RussoOne-Regular.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Albert Sans'; src: url('fonts/AlbertSans.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }

html, body { margin: 0; height: 100%; background: #020a14; overflow: hidden; touch-action: manipulation; }
#fit { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.ck { position: relative; flex: none; width: 1920px; height: 1080px; background: #020a14 url('backdrop.jpg') center / 100% 100% no-repeat; overflow: hidden;
  -webkit-font-smoothing: antialiased; }
.ck .t { position: absolute; margin: 0; white-space: nowrap; line-height: normal; font-synthesis: style; pointer-events: none; }
.ck .t { transform-origin: 0 50%; }
.ck .t.c { transform: translateX(-50%); transform-origin: 50% 50%; }
.ck .russo { font-family: 'Russo One', sans-serif; font-weight: 400; }
.ck .albert { font-family: 'Albert Sans', sans-serif; }
.ck .it { font-style: italic; }
.ck .grad { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding: 0 0.12em; margin: 0 -0.12em; }
.ck .t.grad:not(.c) { transform-origin: 0.12em 50%; }
.ck .t.grad.c { margin: 0; }

.ck #t-back { color: #f2fdff; }
.ck #t-title { background-image: linear-gradient(180deg, #f4fdff 18%, #62f6fe 82%); }
.ck #t-have { color: #7af2fb; }
.ck #t-bal { color: #05fafe; }
.ck #t-paycard { color: #cff1f8; }
.ck #t-paycrypto { color: #fdfefe; }
.ck #t-save { color: #7afb82; }
/* the SAVE 20% glow breathes on opacity alone, the one property a phone animates without repainting */
.ck .a-save-glow { animation: ck-save 1.8s ease-in-out infinite; }
@keyframes ck-save { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.ck.is-still .a-save-glow { animation: none; }
.ck #t-rec { color: #06202b; }
.ck .n { background-image: linear-gradient(180deg, #ffffff 30%, #a6fcfe 88%); }
.ck .u { color: #04fbfe; }
.ck .o { color: #da5355; }
.ck .o::after { content: ''; position: absolute; left: -3%; right: -3%; top: 50%; height: 0.06em; background: #e2494d; transform: rotate(-3.2deg); border-radius: 2px; }
.ck .p { background-image: linear-gradient(180deg, #86fa8b 20%, #3ffb6f 85%); }
.ck .l { color: #c3d3db; font-weight: 500; }
.ck .l b { color: #f5f7f8; font-weight: 700; }
.ck .b { color: #68f879; font-weight: 700; }
.ck .buy { color: #b4fcfd; }
.ck #t-foot { color: #a9bcc8; font-weight: 500; }

/* the interface art (art.js) */
.ck .art, .ck .a { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
/* glows: wide faint strokes under the lit shapes (art.js halo), never a blur filter (a filter on every frame cost a phone about
   300 ms a tap) */
.ck .a-halo { fill: none; stroke: #18e8ff; stroke-linejoin: round; }
.ck .a-halo-1 { stroke-width: 8; opacity: 0.22; }
.ck .a-halo-2 { stroke-width: 16; opacity: 0.11; }
.ck .a-halo-3 { stroke-width: 30; opacity: 0.07; }
.ck .a-halo-green { stroke: #5afa64; }
.ck .a-halo-pay { display: none; }
.ck.pay-card .a-k-card .a-halo-pay, .ck.pay-crypto .a-k-crypto .a-halo-pay { display: inline; }
.ck .a-halo-pay.a-halo-1 { stroke-width: 14; opacity: 0.3; }
.ck .a-halo-pay.a-halo-2 { stroke-width: 24; opacity: 0.14; }
.ck .a-halo-pay.a-halo-3 { stroke-width: 40; opacity: 0.07; }
.ck .a-key { fill: rgba(3, 26, 40, 0.88); stroke: #19e6f5; stroke-width: 2.5; stroke-linejoin: round; }
.ck .a-key-edge { fill: #3df0fb; }
.ck .a-chevron { fill: none; stroke: #19e8ff; stroke-width: 7.5; stroke-linecap: square; stroke-linejoin: miter; }
.ck .a-tab { fill: none; stroke: #16d9ee; stroke-width: 2; }
.ck .a-hud line, .ck .a-hud path { stroke: #19c8e0; stroke-width: 1.6; opacity: 0.85; }
.ck .a-jet, .ck .a-bar { fill: #17dcf2; }
.ck .a-bar-dim { fill: #1596b0; }
.ck .a-bar-mid { fill: #17b4cd; }
.ck .a-under { stroke: #19e0f5; stroke-width: 1.5; opacity: 0.7; }
.ck .a-pay { fill: rgba(15, 35, 53, 0.9); stroke: #4f9cba; stroke-width: 2; stroke-linejoin: round; }
.ck.pay-card .a-k-card .a-pay, .ck.pay-crypto .a-k-crypto .a-pay { fill: rgba(3, 30, 44, 0.92); stroke: #12f4ff; stroke-width: 7; }
.ck .a-icon-line { fill: none; stroke: #a9eef9; stroke-width: 5.5; stroke-linejoin: round; }
.ck .a-icon-fill, .ck .a-icon { fill: #9eeaf7; }
.ck .a-btc { font: 400 47px 'Russo One', sans-serif; fill: #e9fbfe; text-anchor: middle; }
.ck .a-btc-tick { fill: none; stroke: #e9fbfe; stroke-width: 4.5; }
.ck .a-divider { stroke: #6fb6cf; stroke-width: 2; }
.ck .a-save { fill: #062a0a; stroke: #7dff6e; stroke-width: 2.5; stroke-linejoin: round; }
.ck .a-pack { fill: rgba(3, 16, 28, 0.94); stroke: #1aa9c9; stroke-width: 2.5; stroke-linejoin: round; }
.ck .a-pack-rec { fill: rgba(3, 18, 30, 0.95); stroke: #12f2fd; stroke-width: 7; }
.ck .a-badge { fill: url(#a-badge-fill); }
.ck .a-hair { stroke: #1a9fbd; stroke-width: 1; opacity: 0.35; }
.ck .a-emblem-fill { fill: #4c8da4; }
.ck .a-emblem-star { fill: none; stroke: #4c8da4; stroke-width: 5.5; stroke-linejoin: miter; }
.ck .a-plate { fill: rgba(2, 10, 20, 0.55); stroke: #2f7890; stroke-width: 1.5; stroke-linejoin: round; }
.ck .a-gift { fill: #6dfb72; }
.ck .a-gift-bow { fill: none; stroke: #6dfb72; stroke-width: 4; }
.ck .a-bonus-line { stroke: #5fe06a; stroke-width: 1.5; opacity: 0.8; }
.ck .a-buy { fill: url(#a-buy-fill); stroke: #14e4f7; stroke-width: 3.5; stroke-linejoin: round; }
.ck .a-foot { fill: none; stroke: url(#a-foot-fade); stroke-width: 1.5; }
/* ?mask: the art alone, white on black */
.ck.is-mask { background: #000; }
.ck.is-mask .t { display: none; }
.ck.is-mask .a * { fill: #fff !important; stroke: #fff !important; opacity: 1 !important; }
.ck.is-mask .a-halo { display: none !important; }

/* the keys: press areas over the drawn keys. They come before the art in the document, so their hover, focus and press
   light the key's own shapes and legend with sibling selectors: no script. */
.ck button { all: unset; position: absolute; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ck .k-back { left: 62px; top: 40px; width: 268px; height: 92px; }
.ck .k-card { left: 186px; top: 203px; width: 752px; height: 124px; }
.ck .k-crypto { left: 954px; top: 199px; width: 800px; height: 132px; }
.ck .k-buy { top: 803px; height: 114px; }
.ck .k-buy-0 { left: 85px; width: 540px; } .ck .k-buy-1 { left: 683px; width: 553px; } .ck .k-buy-2 { left: 1295px; width: 552px; }
.ck .a-k { transform-box: fill-box; transform-origin: center; }
/* hover and keyboard focus: brighter fill and edge, wider glow, white legend */
.ck .k-buy-0:is(:hover, :focus-visible) ~ .art .a-k-buy-0 .a-buy,
.ck .k-buy-1:is(:hover, :focus-visible) ~ .art .a-k-buy-1 .a-buy,
.ck .k-buy-2:is(:hover, :focus-visible) ~ .art .a-k-buy-2 .a-buy { fill: #0b88a6; stroke: #7ff6ff; }
.ck .k-buy-0:is(:hover, :focus-visible) ~ .art .a-k-buy-0 .a-halo,
.ck .k-buy-1:is(:hover, :focus-visible) ~ .art .a-k-buy-1 .a-halo,
.ck .k-buy-2:is(:hover, :focus-visible) ~ .art .a-k-buy-2 .a-halo,
.ck .k-back:is(:hover, :focus-visible) ~ .art .a-k-back .a-halo,
.ck .k-card:is(:hover, :focus-visible) ~ .art .a-k-card .a-halo,
.ck .k-crypto:is(:hover, :focus-visible) ~ .art .a-k-crypto .a-halo { display: inline; stroke: #6ff4ff; opacity: 0.3; }
.ck .k-back:is(:hover, :focus-visible) ~ .art .a-k-back .a-key { fill: #0a5d78; stroke: #7ff6ff; }
.ck .k-card:is(:hover, :focus-visible) ~ .art .a-k-card .a-pay,
.ck .k-crypto:is(:hover, :focus-visible) ~ .art .a-k-crypto .a-pay { fill: #0d4a63; stroke: #7ff6ff; }
.ck .k-buy-0:is(:hover, :focus-visible) ~ #t-buy1, .ck .k-buy-1:is(:hover, :focus-visible) ~ #t-buy2, .ck .k-buy-2:is(:hover, :focus-visible) ~ #t-buy3,
.ck .k-back:is(:hover, :focus-visible) ~ #t-back, .ck .k-card:is(:hover, :focus-visible) ~ #t-paycard, .ck .k-crypto:is(:hover, :focus-visible) ~ #t-paycrypto { color: #ffffff; }
/* press: the key sinks */
.ck .k-buy-0:active ~ .art .a-k-buy-0, .ck .k-buy-1:active ~ .art .a-k-buy-1, .ck .k-buy-2:active ~ .art .a-k-buy-2,
.ck .k-back:active ~ .art .a-k-back, .ck .k-card:active ~ .art .a-k-card, .ck .k-crypto:active ~ .art .a-k-crypto { transform: scale(0.975); }
/* ?nobg: the backdrop image hidden; what stays is the code */
.ck.is-nobg { background-image: none; background-color: #050d18; }
/* card method: one price alone, centred in the pack's price plate */
.ck #t-p1.solo { left: 365px; } .ck #t-p2.solo { left: 967px; } .ck #t-p3.solo { left: 1578px; }