/* bandphone: pixel UI kit in the 'handheld_cozy' style (Game Asset Forge make_ui_kit).
 * Set --uk-scale to a whole number (1x = the art's own pixels). Fonts: get_font 'tiny5' (dialogue), 'silkscreen' (menus), 'micro-5' (numbers). */
:root { --uk-scale: 3; --uk-ink: #1d2340; --uk-text: #1d2340; --uk-text-shadow: #cdd6e8; --uk-on-dark: #ffffff; }
.uk { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
.uk-dialog { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 6px); border-image: url("slices/dialog.png") 6 6 6 6 fill / calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 6px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 13px); min-height: calc(var(--uk-scale) * 13px); }
.uk-nameplate { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px); border-image: url("slices/nameplate.png") 4 4 4 4 fill / calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 9px); }
.uk-mug-frame { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px); border-image: url("slices/mug_frame.png") 3 3 3 3 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) round; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 7px); min-height: calc(var(--uk-scale) * 7px); }
.uk-mug-frame-48 { display: inline-block; width: calc(var(--uk-scale) * 52px); height: calc(var(--uk-scale) * 52px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -170px) 0 / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-mug-frame-64 { display: inline-block; width: calc(var(--uk-scale) * 68px); height: calc(var(--uk-scale) * 68px); background: url("atlas.png") no-repeat 0 0 / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-menu { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px); border-image: url("slices/menu.png") 5 5 5 5 fill / calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 11px); min-height: calc(var(--uk-scale) * 11px); }
.uk-select { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px); border-image: url("slices/select.png") 2 2 2 2 fill / calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 5px); min-height: calc(var(--uk-scale) * 5px); }
.uk-cursor { display: inline-block; width: calc(var(--uk-scale) * 7px); height: calc(var(--uk-scale) * 9px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -44px) calc(var(--uk-scale) * -152px) / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-cursor { animation: uk-cursor-anim 0.50s steps(2) infinite; }
@keyframes uk-cursor-anim { from { background-position-x: calc(var(--uk-scale) * -44px); } to { background-position-x: calc(var(--uk-scale) * -58px); } }
.uk-advance { display: inline-block; width: calc(var(--uk-scale) * 9px); height: calc(var(--uk-scale) * 8px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -60px) calc(var(--uk-scale) * -152px) / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-advance { animation: uk-advance-anim 0.50s steps(2) infinite alternate; }
@keyframes uk-advance-anim { from { background-position-x: calc(var(--uk-scale) * -60px); } to { background-position-x: calc(var(--uk-scale) * -78px); } }
.uk-hp-bar { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 13px); border-image: url("slices/hp_bar.png") 2 2 2 13 fill / calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 13px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 16px); min-height: calc(var(--uk-scale) * 5px); }
.uk-exp-bar { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 17px); border-image: url("slices/exp_bar.png") 2 2 2 17 fill / calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 2px) calc(var(--uk-scale) * 17px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 20px); min-height: calc(var(--uk-scale) * 5px); }
.uk-hp-fill-green { display: inline-block; width: calc(var(--uk-scale) * 4px); height: calc(var(--uk-scale) * 5px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -89px) calc(var(--uk-scale) * -152px) / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-hp-fill-green { display: block; width: auto; height: 100%; background: url("slices/hp_fill_green.png") repeat-x 0 0 / calc(var(--uk-scale) * 4px) 100%; }
.uk-hp-fill-yellow { display: inline-block; width: calc(var(--uk-scale) * 4px); height: calc(var(--uk-scale) * 5px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -95px) calc(var(--uk-scale) * -152px) / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-hp-fill-yellow { display: block; width: auto; height: 100%; background: url("slices/hp_fill_yellow.png") repeat-x 0 0 / calc(var(--uk-scale) * 4px) 100%; }
.uk-hp-fill-red { display: inline-block; width: calc(var(--uk-scale) * 4px); height: calc(var(--uk-scale) * 5px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -101px) calc(var(--uk-scale) * -152px) / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-hp-fill-red { display: block; width: auto; height: 100%; background: url("slices/hp_fill_red.png") repeat-x 0 0 / calc(var(--uk-scale) * 4px) 100%; }
.uk-exp-fill { display: inline-block; width: calc(var(--uk-scale) * 4px); height: calc(var(--uk-scale) * 5px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -107px) calc(var(--uk-scale) * -152px) / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-exp-fill { display: block; width: auto; height: 100%; background: url("slices/exp_fill.png") repeat-x 0 0 / calc(var(--uk-scale) * 4px) 100%; }
.uk-badge-red { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px); border-image: url("slices/badge_red.png") 3 3 3 3 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 7px); min-height: calc(var(--uk-scale) * 7px); }
.uk-badge-blue { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px); border-image: url("slices/badge_blue.png") 3 3 3 3 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 7px); min-height: calc(var(--uk-scale) * 7px); }
.uk-badge-green { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px); border-image: url("slices/badge_green.png") 3 3 3 3 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 7px); min-height: calc(var(--uk-scale) * 7px); }
.uk-badge-gold { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px); border-image: url("slices/badge_gold.png") 3 3 3 3 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 7px); min-height: calc(var(--uk-scale) * 7px); }
.uk-badge-pink { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px); border-image: url("slices/badge_pink.png") 3 3 3 3 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 7px); min-height: calc(var(--uk-scale) * 7px); }
.uk-badge-violet { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px); border-image: url("slices/badge_violet.png") 3 3 3 3 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 7px); min-height: calc(var(--uk-scale) * 7px); }
.uk-button { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px); border-image: url("slices/button.png") 3 4 5 4 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 9px); }
.uk-button-pressed { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px); border-image: url("slices/button_pressed.png") 3 4 5 4 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 9px); }
.uk-button-disabled { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px); border-image: url("slices/button_disabled.png") 3 4 5 4 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 9px); }
.uk-button-primary { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px); border-image: url("slices/button_primary.png") 3 4 5 4 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 9px); }
.uk-button-primary-pressed { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px); border-image: url("slices/button_primary_pressed.png") 3 4 5 4 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 9px); }
.uk-button-primary-disabled { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px); border-image: url("slices/button_primary_disabled.png") 3 4 5 4 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 9px); }
.uk-key { display: inline-block; width: calc(var(--uk-scale) * 15px); height: calc(var(--uk-scale) * 15px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -130px) calc(var(--uk-scale) * -120px) / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-key.pressed { background-position-x: calc(var(--uk-scale) * -147px); }
.uk-key.disabled { background-position-x: calc(var(--uk-scale) * -164px); }
.uk-tab-on { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) 0 calc(var(--uk-scale) * 4px); border-image: url("slices/tab_on.png") 4 4 0 4 fill / calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) 0 calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 5px); }
.uk-tab-off { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) 0 calc(var(--uk-scale) * 4px); border-image: url("slices/tab_off.png") 4 4 0 4 fill / calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 4px) 0 calc(var(--uk-scale) * 4px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 5px); }
.uk-title-bar { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 7px) calc(var(--uk-scale) * 4px); border-image: url("slices/title_bar.png") 6 4 7 4 fill / calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 4px) calc(var(--uk-scale) * 7px) calc(var(--uk-scale) * 4px) round; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 9px); min-height: calc(var(--uk-scale) * 14px); }
.uk-terminal { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px); border-image: url("slices/terminal.png") 5 5 5 5 fill / calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 5px) round; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 11px); min-height: calc(var(--uk-scale) * 11px); }
.uk-terminal-header { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 13px) calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 18px); border-image: url("slices/terminal_header.png") 5 13 6 18 fill / calc(var(--uk-scale) * 5px) calc(var(--uk-scale) * 13px) calc(var(--uk-scale) * 6px) calc(var(--uk-scale) * 18px) round; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 32px); min-height: calc(var(--uk-scale) * 12px); }
.uk-command-box { display: inline-block; width: calc(var(--uk-scale) * 120px); height: calc(var(--uk-scale) * 48px); background: url("atlas.png") no-repeat 0 calc(var(--uk-scale) * -70px) / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-command-cursor { box-sizing: border-box; border-style: solid; border-width: calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px); border-image: url("slices/command_cursor.png") 3 3 3 3 fill / calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) calc(var(--uk-scale) * 3px) stretch; image-rendering: pixelated; min-width: calc(var(--uk-scale) * 7px); min-height: calc(var(--uk-scale) * 7px); }
.uk-card { display: inline-block; width: calc(var(--uk-scale) * 48px); height: calc(var(--uk-scale) * 64px); background: url("atlas.png") no-repeat calc(var(--uk-scale) * -70px) 0 / calc(var(--uk-scale) * 248px) calc(var(--uk-scale) * 161px); image-rendering: pixelated; }
.uk-card.selected { background-position-x: calc(var(--uk-scale) * -120px); }
/* Text inside boxes: font-family from get_font; color var(--uk-text) with a 1 px var(--uk-text-shadow) shadow (text-shadow: calc(var(--uk-scale) * 1px) calc(var(--uk-scale) * 1px) 0 var(--uk-text-shadow)). */
.uk-hp-bar, .uk-exp-bar { display: block; } .uk-hp-bar > i, .uk-exp-bar > i { display: block; height: 100%; }
@media (prefers-reduced-motion: reduce) { .uk-advance, .uk-cursor { animation: none; } }