/* 0.8.0 dialog restyle (FOR_DAN 2026-10-23, Bit Bite approved). Rendering choice: ONE bitmap webfont, InaPx, built from Shiela's k2 glyph PNGs by tools/build_pxfont_0800.py (PNGs = source of truth). font-size 20px = k2 (10 px cap, 2 px tracking), 30px = k3 (15 px), 40px = k4 (20 px). Used by all 7 dialogs + toasts. Radius 0, no blur shadows, button art 3-sliced (8 px caps). */ @font-face { font-family: "InaPx"; src: url("../assets/ui_px_1023/inapx_0800.woff?v=0.8.5") format("woff"); font-display: block; } :root { --px-k2: 20px; --px-k3: 30px; --px-k4: 40px; --px-b: url("../assets/settings_b_1015/buttons/"); --px-sec: url("../assets/settings_b_1015/buttons/blank_sec_normal_138x48.png"); --px-sec-p: url("../assets/settings_b_1015/buttons/blank_sec_pressed_138x48.png"); --px-pri: url("../assets/settings_b_1015/buttons/blank_pri_normal_138x48.png"); --px-pri-p: url("../assets/settings_b_1015/buttons/blank_pri_pressed_138x48.png"); --px-des: url("../assets/settings_b_1015/buttons/blank_des_normal_138x48.png"); --px-des-p: url("../assets/settings_b_1015/buttons/blank_des_pressed_138x48.png"); } .px, #splash-text, #analytics-consent-card, #keep-flying .kf-card, #overlay-card, #lb-run-toast, #leaderboard-panel, #notes-panel, #levelmap-panel, #toast-0800, #overlay-card button, #keep-flying .kf-btn, #analytics-consent-actions button { font-family: "InaPx", monospace !important; font-weight: 400 !important; font-size: var(--px-k2) !important; line-height: 14px !important; letter-spacing: 0 !important; -webkit-font-smoothing: none; font-smooth: never; text-shadow: none !important; image-rendering: pixelated; } /* --- pixel buttons: 3-slice art, label k2 cream (checked: the art's end caps are 2 px wide, so an 8 px slice is all-cap + plain body) --- */ #overlay-card button, #keep-flying .kf-btn, #analytics-consent-actions button, #lb-tabs button { height: 48px; min-height: 48px; min-width: 44px; padding: 0 10px 4px !important; border: 0 solid transparent !important; border-radius: 0 !important; border-image: var(--px-sec) 0 8 fill / 0 8px stretch !important; background: none !important; box-shadow: none !important; clip-path: none !important; color: #FFF8F0 !important; text-transform: uppercase; cursor: pointer; } #overlay-card button:active, #keep-flying .kf-btn:active, #analytics-consent-actions button:active, #lb-tabs button:active { border-image-source: var(--px-sec-p) !important; padding: 2px 10px 2px !important; } #overlay-card #start-btn, #overlay-card #replay-level-btn, #keep-flying .kf-btn, #analytics-consent-accept, #lb-tabs button[aria-selected="true"], #lb-tabs button.on { border-image-source: var(--px-pri) !important; } #overlay-card #start-btn:active, #overlay-card #replay-level-btn:active, #keep-flying .kf-btn:active, #analytics-consent-accept:active { border-image-source: var(--px-pri-p) !important; } #overlay-card #restart-l1-btn { border-image-source: var(--px-des) !important; } #overlay-card #restart-l1-btn:active { border-image-source: var(--px-des-p) !important; } #overlay-actions button, #overlay-sub-actions button { flex: 0 0 138px !important; width: 138px; } #overlay-card #start-btn, #overlay-card #motion-btn, #overlay-card #restart-l1-btn { flex: 0 0 288px !important; width: 288px; } #overlay-actions, #overlay-sub-actions { gap: 12px !important; } /* 3.1 loading splash */ #splash-text { color: #FFF8F0; text-align: center; } #splash-text .sp-title { font-size: var(--px-k4) !important; line-height: 24px; text-transform: uppercase; letter-spacing: 0; } #splash-text .sp-by { font-size: var(--px-k2) !important; color: #A6BCC1; margin-top: 12px; text-transform: uppercase; } #splash-text .sp-go { font-size: var(--px-k2) !important; color: #E87838; margin-top: 40px; text-transform: uppercase; } #splash-text .sp-go::after { content: ""; display: inline-block; width: 12px; text-align: left; animation: pxdots0800 1.2s steps(1) infinite; } @keyframes pxdots0800 { 0% { content: "."; } 33% { content: ".."; } 66% { content: "..."; } } /* 3.2 consent */ #analytics-consent-card { width: 320px !important; max-width: calc(100vw - 16px); box-sizing: border-box; background: #2A474E !important; color: #FFF8F0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: var(--dk-chip); padding: 0 16px 16px !important; } #analytics-consent-title { display: flex; align-items: center; min-height: 44px; margin: 0 -16px 12px !important; padding: 0 16px; background: #325057; color: #FFF8F0 !important; font-size: var(--px-k2) !important; text-transform: uppercase; } #analytics-consent-body { color: #A6BCC1 !important; font-size: var(--px-k2) !important; line-height: 14px !important; } #analytics-consent-actions { gap: 12px !important; justify-content: center; } #analytics-consent-actions button { width: 138px !important; flex: 0 0 138px; } /* 3.3 keep flying */ #keep-flying .kf-card { width: 320px !important; min-width: 0 !important; box-sizing: border-box; } #keep-flying .kf-title { font-size: var(--px-k3) !important; line-height: 20px !important; text-transform: uppercase; } #keep-flying .kf-count { font-size: var(--px-k4) !important; line-height: 28px !important; color: #FFF8F0; margin: 8px 0 12px; } #keep-flying .kf-btns { gap: 12px !important; justify-content: center; } #keep-flying .kf-btn { flex: 0 0 138px !important; width: 138px; height: 48px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } #keep-flying .kf-ico { display: none !important; } #keep-flying .kf-ico-px { width: 18px; height: 18px; image-rendering: pixelated; } /* 3.4 results + toast */ #overlay-card h1 { font-size: var(--px-k3) !important; line-height: 20px !important; } #overlay-card p, #overlay-card .daily-line, #overlay-version { color: #A6BCC1 !important; } #overlay-card p#overlay-msg { color: #FFF8F0 !important; } #lb-run-toast, #toast-0800 { border-radius: 0 !important; box-shadow: none !important; background: none !important; border: 12px solid transparent !important; border-image: url("../assets/costume_0800_placeholder/toast_frame_9slice_24.png") 6 fill / 12px !important; color: #FFF8F0 !important; min-height: 44px; box-sizing: border-box; padding: 7px 6px 3px !important; text-transform: uppercase; transition: transform 0.2s steps(4), opacity 0.15s steps(3) !important; } .share-postmark { border: 0 !important; border-radius: 0 !important; transform: none !important; width: 32px !important; height: 32px !important; font-size: 0 !important; color: transparent !important; background: url("../assets/ui_px_1023/postmark_IF_32x32.png") 0 0 / 32px 32px no-repeat !important; image-rendering: pixelated; } .share-pc { box-shadow: none !important; border: 2px solid #F0A43A !important; border-radius: 0 !important; } .share-pc-stamp { border: 2px solid #B44628 !important; border-radius: 0 !important; clip-path: var(--dk-chip); } #levelmap-panel .lm-head { background: #325057 !important; } #levelmap-panel .lm-head button { width: 44px !important; height: 44px !important; min-height: 44px; padding: 0 !important; font-size: 0 !important; flex: 0 0 44px !important; border-image: none !important; background: url("../assets/settings_b_1015/buttons/back_normal_44x44.png") 0 0 / 44px 44px no-repeat !important; } #levelmap-panel .lm-head button:active { background-image: url("../assets/settings_b_1015/buttons/back_pressed_44x44.png") !important; } #lm-list li.locked { background: #1A363C !important; color: #557177 !important; border-top-color: #223F45 !important; } #lm-list li.current { background: #FFF8F0 !important; color: #2A2A2A !important; border-top-color: #E9DFCF !important; } #lm-list .lm-chip { background: #557177 !important; color: #FFF8F0 !important; border-radius: 0 !important; } #lm-list .current .lm-chip { background: #A8674A !important; } #lm-list li, #lm-list .lm-chip, #levelmap-panel * { border-radius: 0 !important; box-shadow: none !important; } /* 3.5 run board: version line */ #overlay-version { color: #557177 !important; text-transform: uppercase; } /* 3.6 weekly leaderboard */ #lb-head { color: #FFF8F0 !important; text-transform: uppercase; } #lb-countdown, #lb-status { color: #A6BCC1 !important; } #lb-tabs { gap: 4px; display: flex; flex-wrap: wrap; } #lb-tabs button { height: 44px !important; min-height: 44px; min-width: 44px; flex: 1 0 44px; } #lb-you, #leaderboard-panel [style*="border-radius"] { border-radius: 0 !important; background: #325057 !important; } #leaderboard-panel *, #notes-panel * { border-radius: 0 !important; box-shadow: none !important; } /* 3.7 notes panel: cream like the note card */ #notes-panel { background: #FFF8F0 !important; color: #2A2A2A !important; clip-path: none !important; position: relative; border-top: 24px solid #E9DFCF !important; padding: 8px 12px 12px !important; } #notes-panel::after { content: ""; position: absolute; top: -24px; right: 0; width: 16px; height: 16px; background: linear-gradient(225deg, #2A474E 50%, #E9DFCF 50%); } #notes-panel .panel-head { position: absolute; top: -20px; left: 12px; color: #2A2A2A !important; text-transform: uppercase; } #notes-list, #notes-panel #notes-empty { color: #557177 !important; } #notes-panel .panel-actions { position: absolute; top: -24px; right: 18px; margin: 0; } #notes-panel #notes-close { width: 44px !important; height: 44px !important; min-height: 44px; flex: 0 0 44px !important; padding: 0 !important; font-size: 0 !important; color: transparent !important; border-image: none !important; background: url("../assets/settings_b_1015/buttons/close_normal_44x44.png") 0 0 / 44px 44px no-repeat !important; } #notes-panel #notes-close:active { background-image: url("../assets/settings_b_1015/buttons/close_pressed_44x44.png") !important; } #notes-list img { width: 162px; height: auto; image-rendering: pixelated; } /* 3.8 pause button: 44 x 44, even bars, -4 px so it stays under the stopwatch */ #pause-btn { width: 44px !important; height: 44px !important; border-radius: 0 !important; border: 2px solid #223F45 !important; background: #2A474E !important; gap: 6px !important; top: calc(max(12px, env(safe-area-inset-top)) + 54px) !important; box-shadow: none !important; } #pause-btn i { width: 6px !important; height: 18px !important; border-radius: 0 !important; background: #FFF8F0 !important; } #pause-dialog .pd-card { background: #2A474E !important; color: #FFF8F0 !important; border-radius: 0 !important; } /* early win: first-coin NICE! toast + stepped coin burst */ #toast-0800 { position: fixed; left: 50%; top: 34%; z-index: 31; pointer-events: none; transform: translate(-50%, 8px); opacity: 0; white-space: nowrap; font-size: var(--px-k3) !important; line-height: 20px !important; padding: 9px 10px 3px !important; } #toast-0800.on { transform: translate(-50%, 0); opacity: 1; } #toast-0800 i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; background: #FFD45C; box-shadow: 2px 2px 0 #B47830; animation: burst0800 0.5s steps(5) forwards; } @keyframes burst0800 { from { transform: translate(-2px, -2px); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #toast-0800 i { display: none; } #toast-0800, #lb-run-toast { transition: none !important; } } #analytics-consent-actions #analytics-consent-accept { border-image-source: var(--px-pri) !important; } #analytics-consent-actions #analytics-consent-accept:active { border-image-source: var(--px-pri-p) !important; } #overlay-card #test-picker button { flex: 0 0 48px !important; width: 48px; min-width: 48px; padding: 0 0 4px !important; } /* ?test=1 dev picker: 48 px chips */ /* 0.8.0 Batch B: result-screen rewards + achievement toast (PLACEHOLDER art from assets/costume_0800_placeholder/, stepped edges) */ #rw-0800 { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; font-family: "InaPx", monospace; font-size: var(--px-k2); line-height: 14px; color: #F4ECD8; } #rw-0800:empty { display: none; } #rw-0800 .rw-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: #20363C; clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); } #rw-0800 .rw-gift { background: #6B3A22; } #rw-0800 .rw-next { opacity: 0.75; } #rw-0800 .rw-next img { filter: grayscale(1) brightness(0.8); } #rw-0800 img { image-rendering: pixelated; flex: 0 0 24px; } #rw-0800 .rw-line { text-align: center; color: #E87838; } #rw-0800 .rw-ad { min-height: 44px; font-family: "InaPx", monospace; font-size: var(--px-k2); } #ach-toast-0800 { position: fixed; left: 50%; bottom: 96px; z-index: 32; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 12px solid transparent; border-image: url("../assets/costume_0800_placeholder/toast_frame_9slice_24.png") 6 fill / 12px; color: #F4ECD8; font-family: "InaPx", monospace; font-size: var(--px-k2); line-height: 14px; pointer-events: none; } #ach-toast-0800.hidden { display: none; } #ach-toast-0800 .at-txt { display: flex; flex-direction: column; } #ach-toast-0800 b { color: #E87838; font-weight: normal; } #ach-toast-0800 img { image-rendering: pixelated; } #ach-toast-0800.go { animation: achIn0800 0.24s steps(4) both; } @keyframes achIn0800 { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } /* 0.8.0 Batch C: The Climb Log + The Wardrobe (phone-first 412x915; pixel webfont, 3-slice buttons >= 44 px, radius 0, no blur) */ #rw-0800 .rw-goal { width: 100%; } .cl-panel { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: #142328; color: #FFF8F0; font-family: "InaPx", monospace; font-size: var(--px-k2); line-height: 14px; -webkit-font-smoothing: none; border-radius: 0; box-shadow: none; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); box-sizing: border-box; } .cl-panel.hidden, .cl-entry-0800.hidden, .cl-panel .cl-tabs.hidden { display: none !important; } .cl-panel button, .cl-entry-0800 button { font-family: "InaPx", monospace; font-size: var(--px-k2); line-height: 14px; color: #FFF8F0; text-transform: uppercase; min-height: 48px; min-width: 44px; padding: 0 10px 4px; border: 0 solid transparent; border-radius: 0; border-image: var(--px-sec) 0 8 fill / 0 8px stretch; background: none; box-shadow: none; cursor: pointer; image-rendering: pixelated; } .cl-panel button:active, .cl-entry-0800 button:active { border-image-source: var(--px-sec-p); padding: 2px 10px 2px; } .cl-panel button.on, .cl-panel .cl-adbtn { border-image-source: var(--px-pri); } .cl-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .cl-title { flex: 1; font-size: var(--px-k3); line-height: 22px; text-align: center; color: #E87838; } .cl-count { min-width: 44px; text-align: right; } .cl-tabs { display: flex; gap: 4px; margin: 8px 0 6px; flex: 0 0 auto; } .cl-tabs button { flex: 1 1 0; padding: 0 2px 4px; } .cl-body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; -webkit-overflow-scrolling: touch; } .cl-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #20363C; min-height: 44px; box-sizing: border-box; } .cl-row img { image-rendering: pixelated; flex: 0 0 auto; } .cl-mid { flex: 1 1 auto; min-width: 0; } .cl-name { color: #FFF8F0; } .cl-sub { color: #B8C4B8; margin-top: 4px; overflow-wrap: anywhere; } .cl-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .cl-medal { width: 24px; height: 24px; flex: 0 0 24px; image-rendering: pixelated; margin: 2px; } /* v1 art: medal_*_12 PNGs at 2x replace the coloured letter tiles */ .cl-star { width: 24px; height: 24px; image-rendering: pixelated; } .cl-hard { width: 24px; height: 24px; image-rendering: pixelated; } .cl-set { color: #E87838; } .cl-prog { color: #F8D048; } .cl-grp { margin: 8px 0 2px; color: #E87838; font-size: var(--px-k3); line-height: 22px; } .cl-ach.locked { opacity: 0.8; } .cl-ach.locked .cl-name { color: #8A9AA0; } .cl-empty { padding: 16px 8px; color: #B8C4B8; text-align: center; } .cl-link-wd { align-self: center; margin: 8px 0; } .cl-ad { flex: 0 0 auto; display: flex; justify-content: center; margin-top: 6px; } .cl-ad:empty { display: none; } .cl-adbtn { width: 100%; } .wd-preview { position: relative; align-self: center; width: 96px; height: 96px; background: #20363C; margin: 4px 0 8px; } .wd-ina { position: absolute; left: 24px; top: 24px; width: 48px; height: 48px; image-rendering: pixelated; } .wd-on { position: absolute; left: 36px; width: 24px; height: 24px; } .wd-hat { top: 18px; } .wd-shirt { top: 44px; } .wd-gloves { top: 52px; } .wd-trousers { top: 60px; } .wd-shoes { top: 72px; } .wd-sl { flex: 0 0 76px; } .wd-pieces { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .wd-pieces .wd-piece { width: 48px; padding: 0 0 4px; display: inline-flex; align-items: center; justify-content: center; } .cl-entry-0800 { position: fixed; z-index: 75; left: 8px; right: 8px; top: calc(56px + env(safe-area-inset-top)); display: flex; gap: 8px; justify-content: center; pointer-events: none; } .cl-entry-0800 button { pointer-events: auto; } @media (max-width: 360px) { .cl-panel { font-size: 16px; } .cl-tabs button { font-size: 16px; } } /* 0.8.0 Batch D (§4): next-goal line + next-level preview (result overlay + death level select) */ .ng-goal, .ng-continue { font-family: "InaPx", monospace; font-size: var(--px-k2); line-height: 14px; color: #FFF8F0; text-transform: uppercase; min-height: 48px; min-width: 44px; padding: 0 10px 4px; border: 0 solid transparent; border-radius: 0; border-image: var(--px-sec) 0 8 fill / 0 8px stretch; background: none; box-shadow: none; cursor: pointer; image-rendering: pixelated; width: 100%; } .ng-goal:active { border-image-source: var(--px-sec-p); padding: 2px 10px 2px; } .ng-continue{border-image:none;background:url("../assets/ui_px_1024/continue/ng_continue_normal_138x48.png") 0 0/138px 48px no-repeat;width:138px;min-width:138px; height:48px;padding:0;font-size:0;color:transparent} .ng-continue:active{background-image:url("../assets/ui_px_1024/continue/ng_continue_pressed_138x48.png");padding:0} .ng-next { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 8px; background: #1C3238; border: 2px solid #223F45; } .ng-thumb { width: 30px; height: 70px; image-rendering: pixelated; flex: none; } .ng-txt { display: flex; flex-direction: column; flex: 1; gap: 4px; font-family: "InaPx", monospace; font-size: var(--px-k2); line-height: 14px; color: #FFF8F0; text-transform: uppercase; } .ng-txt b { color: #E87838; font-weight: normal; } .ng-ls-0800 { position: fixed; z-index: 75; left: 8px; right: 8px; top: calc(108px + env(safe-area-inset-top)); padding: 6px; background: #142328; border: 2px solid #223F45; box-sizing: border-box; } .ng-ls-0800.hidden { display: none !important; } .rw-medals img.rw-ic { width: 24px; height: 24px; image-rendering: pixelated; } /* 0.8.2 HUD polish (Pat NEXT BATCH items 1-3) */ /* 1. HUD text in the dialogs' pixel font (InaPx: k1 10px / k2 20px, integer steps only). #lives / #coin-glyph keep their icon font (InaPx has no ● ◎; glyph_coverage_0820 lists them as icon-by-design). */ #hud { font-weight: 400; } #score, #hiscore, #coins, #lives-sep, #proto-version { color: #F0C878; } /* 0.8.2: Shiela pick, 9.79:1 on #1B2626 */ #score { font-family: "InaPx", monospace; font-weight: 400; font-size: var(--px-k3, 30px); line-height: 22px; letter-spacing: 0; text-shadow: none; } #hiscore, #coins, #lives-sep, #proto-version { font-family: "InaPx", monospace; font-weight: 400; font-size: var(--px-k2, 20px); line-height: 14px; letter-spacing: 0; text-shadow: none; } #alpha-note { font-family: "InaPx", monospace !important; font-weight: 400 !important; font-size: 10px !important; line-height: 10px !important; letter-spacing: 0 !important; } /* 2. avatar tap target >= 48x48, art unmoved: 4px content-box padding each side, box shifted by -4px (art stays 40x40 at the same spot) */ #hud-avatar { box-sizing: content-box; padding: 4px; left: calc(max(16px, env(safe-area-inset-left)) - 4px); top: -4px; } /* 3. turbo count: crisp 1px pixel offset shadow (no blur), pixel font */ #turbo-btn .turbo-count { font: 400 10px/10px "InaPx", monospace; text-shadow: 1px 1px 0 #000; } #turbo-btn .turbo-countdown { font: 400 20px/14px "InaPx", monospace; text-shadow: 1px 1px 0 #000; } /* 0.8.4 Shiela continue sweep B: baked kf continue */ #keep-flying #kf-continue{border-image:none!important;background:url("../assets/ui_px_1024/continue/kf_continue_normal_138x48.png") 0 0/138px 48px no-repeat!important; font-size:0!important;color:transparent!important;padding:0!important;image-rendering:pixelated} #keep-flying #kf-continue:active{background-image:url("../assets/ui_px_1024/continue/kf_continue_pressed_138x48.png")!important} #keep-flying #kf-continue .kf-ico-px{display:none!important} /* 0.8.4 Shiela sweep: off-style items (list in FOR_DAN.md §4) */ #notes-panel::after { background: url("data:image/svg+xml,") 0 0 / 16px 16px no-repeat; image-rendering: pixelated; } /* 2px stepped dog-ear, was a smooth 225deg gradient */ #lb-list .lb-self { background: #86503C !important; border: 0; opacity: 1; font-weight: 400; } /* flat, no translucent tint */ .cl-grp { font-size: var(--px-k2); line-height: 14px; text-transform: uppercase; } #levelmap-panel .lm-title { font: 400 var(--px-k2)/14px "InaPx", monospace; letter-spacing: 0; text-transform: uppercase; -webkit-font-smoothing: none; } #turbo-btn .turbo-count, #turbo-btn .turbo-countdown { text-shadow: none; } #lives { display: inline-flex; gap: 0; align-items: center; letter-spacing: 0; text-shadow: none; height: 17px; margin-left: -5px; } #lives .lv-h { display: inline-block; width: 16px; height: 16px; margin: -2px -3px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAa0lEQVR4nGNgGJ5gQU/F/wU9Ff9x8ZEBIzbNNjaODAwMDAxHjuxnYGBgYEDmJ5R0oOhhxKUZF0A3hAm/ZwgD6hqQUNLBCPM3NoAtDDBcgMsQbJrxggU9Ff/vnNj5/86JnTijkChDyNY8ggAADX07a+MnrekAAAAASUVORK5CYII=") 0 0 / 16px 16px no-repeat; image-rendering: pixelated; } #lives .lv-h.f { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdUlEQVR4nGNgGJ5ggZvN/wVuNv9x8ZEBCzbNDiZ6EDYDw38GBgYGZH7CriOMyOoZsWmWj4hjYGBgYHi4YhGGjQfOXGJANgTDBbg04gJMRKskxoCEXUcYD5y5hFMxuvOxugCXIdg0YzUAmyG4NBME+OJ/FCAAAL9gOvONeaYyAAAAAElFTkSuQmCC"); } /* hearts + coin: byte-exact data: URIs of the shipped heart_full / heart_empty / coin_spin0.png (no extra HTTP load: the goldens are load-timing sensitive). Layout is held to the 0.8.3 dots box: the heart art is 10x9 inside 3px of transparent padding, so -3px margins give 3 x 10 = 30px and margin-left -5px takes the extra 5px from the separator's side bearing; the fuel gauge stays at the same x (coin -> fuel sprites fly to it, so the goldens stay identical) */ #coin-glyph { display: inline-block; width: 16px; height: 16px; vertical-align: middle; font-size: 0; color: transparent; text-shadow: none; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAe0lEQVR4nGNgGPKAEZfElgqD/+hiPh0XMNSz4NJs4mOAKc7A8B/dECZ8msVNahjETWrgciY+BhguY8KnmYGBgeHlmRYUC9ANwXABPs3YAFYDiNWM0wBiNeN1AVkG+HRcYDyz5QJeDWe2XEBJDxguwGcIumYGBiqkxIEHALA3Nnomk8ByAAAAAElFTkSuQmCC") 0 0 / 16px 16px no-repeat; image-rendering: pixelated; } /* InaPx has no ◎: coin_spin0.png frame 0, inlined */