Pin a specific rmlui commit

Need to fix:
- Remove default android header bar
- Fix rcss styling to work on small screens

CMakeLists.txt

@@ -8,55 +8,65 @@ set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
 find_package(PkgConfig REQUIRED)
 find_package(Freetype REQUIRED)
-find_package(glfw3 CONFIG REQUIRED)
 find_package(Lua REQUIRED)
+find_package(SDL3 CONFIG REQUIRED)
+find_package(SDL3_image CONFIG REQUIRED)
+find_package(SQLiteCpp REQUIRED)
+find_package(toml11 CONFIG REQUIRED)
 
 pkg_check_modules(LUNASVG REQUIRED IMPORTED_TARGET lunasvg)
 add_library(lunasvg::lunasvg ALIAS PkgConfig::LUNASVG)
 
-#pkg_check_modules(SQLITE3 REQUIRED IMPORTED_TARGET sqlite3)
-#add_library(sqlite3::sqlite3 ALIAS PkgConfig::SQLITE3)
-
-find_package(SQLiteCpp REQUIRED)
-
-find_package(toml11 CONFIG REQUIRED)
-
 find_package(RmlUi CONFIG REQUIRED)
 
+add_library(rmlui_backend STATIC
+  vendor/rmlui_backend/RmlUi_Backend_SDL_SDLrenderer.cpp
+  vendor/rmlui_backend/RmlUi_Platform_SDL.cpp
+  vendor/rmlui_backend/RmlUi_Renderer_SDL.cpp
+)
+
+target_include_directories(rmlui_backend PUBLIC
+  vendor/rmlui_backend
+)
+
+target_compile_definitions(rmlui_backend PUBLIC
+  RMLUI_SDL_VERSION_MAJOR=3
+)
+
+target_link_libraries(rmlui_backend PUBLIC
+  RmlUi::RmlUi
+  SDL3::SDL3
+  SDL3_image::SDL3_image
+  Freetype::Freetype
+)
 
 add_executable(${PROJECT_NAME}
-    src/main.cpp
-    src/database.cpp
-    src/ui.cpp
-    src/image_utils.cpp
-
-    vendor/rmlui_backend/RmlUi_Backend_GLFW_GL3.cpp
-    vendor/rmlui_backend/RmlUi_Platform_GLFW.cpp
-    vendor/rmlui_backend/RmlUi_Renderer_GL3.cpp
+  src/main.cpp
+  src/database.cpp
+  src/ui.cpp
+  src/image_utils.cpp
 )
 
 target_include_directories(${PROJECT_NAME} PRIVATE
-    src
-    vendor/rmlui_backend
-    ${FREETYPE_INCLUDE_DIRS}
+  src
+  ${FREETYPE_INCLUDE_DIRS}
 )
 
 target_link_libraries(${PROJECT_NAME} PRIVATE
-    RmlUi::RmlUi
-    RmlUi::Debugger
-    RmlUi::Lua
-    ${LUA_LIBRARIES}
-    Freetype::Freetype
-    lunasvg::lunasvg
-    glfw
-    toml11::toml11
-    SQLiteCpp
+  rmlui_backend
+  RmlUi::RmlUi
+  RmlUi::Debugger
+  RmlUi::Lua
+  ${LUA_LIBRARIES}
+  Freetype::Freetype
+  lunasvg::lunasvg
+  toml11::toml11
+  SQLiteCpp
 )
 
 install(TARGETS ${PROJECT_NAME} DESTINATION bin)
 install(DIRECTORY assets DESTINATION bin)
 
 target_compile_definitions(${PROJECT_NAME} PRIVATE
-    ASSETS_DIR="${CMAKE_SOURCE_DIR}/bin/assets"
+  ASSETS_DIR="${CMAKE_SOURCE_DIR}/bin/assets"
 )
-

android/.gitignore

@@ -0,0 +1,3 @@
+.gradle
+build
+app/.cxx

android/app/CMakeLists.txt

@@ -0,0 +1,138 @@
+cmake_minimum_required(VERSION 3.22.1)
+project(critterfolio_android LANGUAGES C CXX)
+
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+include(ExternalProject)
+
+set(DEPS_INSTALL ${CMAKE_BINARY_DIR}/deps/install)
+
+# ExternalProject_Add spawns a completely separate CMake invocation for each
+# dependency, so none of AGP's Android toolchain settings carry over
+# automatically - we have to forward them explicitly to every sub-build.
+set(ANDROID_TOOLCHAIN_ARGS
+  -DCMAKE_TOOLCHAIN_FILE=${CMAKE_TOOLCHAIN_FILE}
+  -DANDROID_ABI=${ANDROID_ABI}
+  -DANDROID_PLATFORM=${ANDROID_PLATFORM}
+  -DANDROID_STL=c++_shared
+  -DCMAKE_BUILD_TYPE=Release
+  -DCMAKE_INSTALL_PREFIX=${DEPS_INSTALL}
+  -DCMAKE_PREFIX_PATH=${DEPS_INSTALL}
+  -DBUILD_SHARED_LIBS=OFF
+  -DCMAKE_CXX_STANDARD=17
+  -DCMAKE_CXX_STANDARD_REQUIRED=ON
+  -DCMAKE_FIND_ROOT_PATH_MODE_PACKAGE=BOTH
+  -DCMAKE_FIND_ROOT_PATH_MODE_LIBRARY=BOTH
+  -DCMAKE_FIND_ROOT_PATH_MODE_INCLUDE=BOTH
+)
+
+find_package(SDL3 REQUIRED CONFIG)
+find_package(SDL3_image REQUIRED CONFIG)
+
+ExternalProject_Add(freetype_ext
+  GIT_REPOSITORY https://github.com/freetype/freetype.git
+  GIT_TAG VER-2-13-3
+  CMAKE_ARGS ${ANDROID_TOOLCHAIN_ARGS}
+    -DFT_DISABLE_ZLIB=TRUE
+    -DFT_DISABLE_BZIP2=TRUE
+    -DFT_DISABLE_PNG=TRUE
+    -DFT_DISABLE_HARFBUZZ=TRUE
+    -DFT_DISABLE_BROTLI=TRUE
+)
+
+ExternalProject_Add(lunasvg_ext
+  GIT_REPOSITORY https://github.com/sammycage/lunasvg.git
+  GIT_TAG v3.2.1
+  CMAKE_ARGS ${ANDROID_TOOLCHAIN_ARGS}
+  DEPENDS freetype_ext
+)
+
+# Lua ships no official CMakeLists, and we don't want its standalone lua/luac
+# CLI targets (those need readline). We compile just the library sources.
+ExternalProject_Add(lua_ext
+  GIT_REPOSITORY https://github.com/lua/lua.git
+  GIT_TAG v5.4.8
+  CONFIGURE_COMMAND ""
+  BUILD_IN_SOURCE 1
+  BUILD_COMMAND sh -c "${CMAKE_C_COMPILER} --target=${CMAKE_C_COMPILER_TARGET} --sysroot=${CMAKE_SYSROOT} -c -O2 -fPIC -DLUA_USE_POSIX $(ls *.c | grep -v -e '^lua.c$' -e '^luac.c$') && ${CMAKE_AR} rcs liblua.a *.o"
+  INSTALL_COMMAND ${CMAKE_COMMAND} -E make_directory ${DEPS_INSTALL}/lib ${DEPS_INSTALL}/include
+    COMMAND ${CMAKE_COMMAND} -E copy liblua.a ${DEPS_INSTALL}/lib/
+    COMMAND ${CMAKE_COMMAND} -E copy lua.h lauxlib.h lualib.h luaconf.h ${DEPS_INSTALL}/include/
+)
+
+ExternalProject_Add(sqlitecpp_ext
+  GIT_REPOSITORY https://github.com/SRombauts/SQLiteCpp.git
+  GIT_TAG 3.3.3
+  CMAKE_ARGS ${ANDROID_TOOLCHAIN_ARGS}
+    -DSQLITECPP_INTERNAL_SQLITE=ON
+    -DSQLITECPP_RUN_CPPLINT=OFF
+    -DSQLITECPP_RUN_CPPCHECK=OFF
+)
+
+ExternalProject_Add(toml11_ext
+  GIT_REPOSITORY https://github.com/ToruNiina/toml11.git
+  GIT_TAG v3.8.1
+  CMAKE_ARGS ${ANDROID_TOOLCHAIN_ARGS}
+)
+
+ExternalProject_Add(rmlui_ext
+  GIT_REPOSITORY https://github.com/mikke89/RmlUi.git
+  GIT_TAG master
+  CMAKE_ARGS ${ANDROID_TOOLCHAIN_ARGS}
+    -DFreetype_ROOT=${DEPS_INSTALL}
+    -DRMLUI_LUA_BINDINGS=ON
+    -DRMLUI_LUA_BINDINGS_LIBRARY=lua
+    -DRMLUI_SVG_PLUGIN=ON
+    -DRMLUI_SAMPLES=OFF
+    -DBUILD_TESTING=OFF
+  DEPENDS freetype_ext lunasvg_ext lua_ext
+)
+
+set(PROJECT_SRC_DIR ${CMAKE_SOURCE_DIR}/../../src)
+set(RMLUI_BACKEND_DIR ${CMAKE_SOURCE_DIR}/../../vendor/rmlui_backend)
+
+add_library(critterfolio SHARED
+  ${PROJECT_SRC_DIR}/main.cpp
+  ${PROJECT_SRC_DIR}/database.cpp
+  ${PROJECT_SRC_DIR}/ui.cpp
+  ${PROJECT_SRC_DIR}/image_utils.cpp
+  ${RMLUI_BACKEND_DIR}/RmlUi_Backend_SDL_SDLrenderer.cpp
+  ${RMLUI_BACKEND_DIR}/RmlUi_Platform_SDL.cpp
+  ${RMLUI_BACKEND_DIR}/RmlUi_Renderer_SDL.cpp
+)
+
+add_dependencies(critterfolio freetype_ext lunasvg_ext lua_ext sqlitecpp_ext toml11_ext rmlui_ext)
+
+target_include_directories(critterfolio PRIVATE
+  ${PROJECT_SRC_DIR}
+  ${RMLUI_BACKEND_DIR}
+  ${DEPS_INSTALL}/include
+)
+
+target_compile_definitions(critterfolio PRIVATE
+  RMLUI_SDL_VERSION_MAJOR=3
+  RMLUI_STATIC_LIB
+)
+
+# Linked by explicit path rather than find_package(), since find_package()
+# runs during THIS configure pass - before any ExternalProject_Add step
+# above has actually built or installed anything (those only run later,
+# during the actual build). This is what the superbuild pattern is for.
+target_link_directories(critterfolio PRIVATE ${DEPS_INSTALL}/lib)
+
+target_link_libraries(critterfolio PRIVATE
+  SDL3::SDL3
+  SDL3_image::SDL3_image
+  rmlui
+  rmlui_debugger
+  rmlui_lua
+  lua
+  freetype
+  lunasvg
+  plutovg
+  SQLiteCpp
+  sqlite3
+)
+
+target_link_options(critterfolio PRIVATE "-Wl,-u,SDL_main")

android/app/build.gradle.kts

@@ -0,0 +1,67 @@
+plugins {
+    id("com.android.application")
+}
+
+android {
+    namespace = "com.critterfolio.app"
+    compileSdk = 34
+    ndkVersion = "26.3.11579264"
+
+    defaultConfig {
+        applicationId = "com.critterfolio.app"
+        minSdk = 24
+        targetSdk = 34
+        versionCode = 1
+        versionName = "0.1.0"
+
+        ndk {
+            abiFilters += listOf("arm64-v8a")
+        }
+
+        externalNativeBuild {
+            cmake {
+                arguments += "-DANDROID_STL=c++_shared"
+                cppFlags += "-std=c++17"
+            }
+        }
+    }
+
+    buildFeatures {
+        prefab = true
+    }
+
+    externalNativeBuild {
+        cmake {
+            path = file("CMakeLists.txt")
+            version = "3.22.1"
+        }
+    }
+
+    sourceSets {
+        getByName("main") {
+            assets.srcDirs("../../assets")
+        }
+    }
+
+    buildTypes {
+        release {
+            isMinifyEnabled = false
+        }
+    }
+
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
+    }
+
+    packaging {
+        jniLibs {
+            useLegacyPackaging = true
+        }
+    }
+}
+
+dependencies {
+    implementation(files("libs/SDL3-3.4.14.aar"))
+    implementation(files("libs/SDL3_image-3.4.4.aar"))
+}

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-feature android:glEsVersion="0x00030000" android:required="true" />
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+        android:allowBackup="true"
+        android:label="Critterfolio"
+        android:hasCode="true">
+
+        <activity
+            android:name="com.critterfolio.app.MainActivity"
+            android:label="Critterfolio"
+            android:configChanges="orientation|screenSize|keyboardHidden"
+            android:exported="true"
+            android:screenOrientation="fullSensor"
+            android:theme="@android:style/Theme.Black.NoTitleBar">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+</manifest>

android/app/src/main/java/com/critterfolio/app/MainActivity.java

@@ -0,0 +1,13 @@
+package com.critterfolio.app;
+
+import org.libsdl.app.SDLActivity;
+
+public class MainActivity extends SDLActivity {
+    @Override
+    protected String[] getLibraries() {
+        return new String[] {
+            "SDL3",
+            "critterfolio"
+        };
+    }
+}

android/build.gradle.kts

@@ -0,0 +1,3 @@
+plugins {
+    id("com.android.application") version "8.5.2" apply false
+}

android/buildlog.txt

@@ -0,0 +1,47 @@
+> Task :app:preBuild UP-TO-DATE
+> Task :app:preDebugBuild UP-TO-DATE
+> Task :app:mergeDebugNativeDebugMetadata NO-SOURCE
+> Task :app:javaPreCompileDebug UP-TO-DATE
+> Task :app:checkDebugAarMetadata UP-TO-DATE
+> Task :app:generateDebugResValues UP-TO-DATE
+> Task :app:mapDebugSourceSetPaths UP-TO-DATE
+> Task :app:generateDebugResources UP-TO-DATE
+> Task :app:mergeDebugResources UP-TO-DATE
+> Task :app:packageDebugResources UP-TO-DATE
+> Task :app:parseDebugLocalResources UP-TO-DATE
+> Task :app:createDebugCompatibleScreenManifests UP-TO-DATE
+> Task :app:extractDeepLinksDebug UP-TO-DATE
+> Task :app:processDebugMainManifest UP-TO-DATE
+> Task :app:processDebugManifest UP-TO-DATE
+> Task :app:processDebugManifestForPackage UP-TO-DATE
+> Task :app:processDebugResources UP-TO-DATE
+> Task :app:compileDebugJavaWithJavac UP-TO-DATE
+> Task :app:mergeDebugShaders UP-TO-DATE
+> Task :app:compileDebugShaders NO-SOURCE
+> Task :app:generateDebugAssets UP-TO-DATE
+> Task :app:mergeDebugAssets UP-TO-DATE
+> Task :app:compressDebugAssets UP-TO-DATE
+> Task :app:desugarDebugFileDependencies UP-TO-DATE
+> Task :app:dexBuilderDebug UP-TO-DATE
+> Task :app:mergeDebugGlobalSynthetics UP-TO-DATE
+> Task :app:processDebugJavaRes NO-SOURCE
+> Task :app:mergeDebugJavaResource UP-TO-DATE
+> Task :app:checkDebugDuplicateClasses UP-TO-DATE
+> Task :app:mergeDebugStartupProfile UP-TO-DATE
+> Task :app:mergeExtDexDebug UP-TO-DATE
+> Task :app:mergeLibDexDebug UP-TO-DATE
+> Task :app:mergeProjectDexDebug UP-TO-DATE
+> Task :app:configureCMakeDebug[arm64-v8a]
+> Task :app:buildCMakeDebug[arm64-v8a]
+> Task :app:mergeDebugJniLibFolders UP-TO-DATE
+> Task :app:validateSigningDebug UP-TO-DATE
+> Task :app:writeDebugAppMetadata UP-TO-DATE
+> Task :app:writeDebugSigningConfigVersions UP-TO-DATE
+> Task :app:mergeDebugNativeLibs
+> Task :app:stripDebugDebugSymbols
+> Task :app:packageDebug
+> Task :app:createDebugApkListingFileRedirect UP-TO-DATE
+> Task :app:assembleDebug
+
+BUILD SUCCESSFUL in 9s
+37 actionable tasks: 5 executed, 32 up-to-date

android/gradle.properties

@@ -0,0 +1,2 @@
+org.gradle.jvmargs=-Xmx2048m
+android.useAndroidX=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle.kts

@@ -0,0 +1,17 @@
+pluginManagement {
+    repositories {
+        google()
+        mavenCentral()
+        gradlePluginPortal()
+    }
+}
+
+dependencyResolutionManagement {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+rootProject.name = "critterfolio"
+include(":app")

assets/main.rml

@@ -10,83 +10,74 @@
 
   <body data-model="app_data">
     <div id="header">
-      <h1>Critterfolio</h1>
+      <div class="header-title-group">
+        <h1>Critterfolio</h1>
+        <!-- <span class="header-tag">Field Registry</span> -->
+      </div>
       <button id="new-critter-btn" data-event-click="is_add_critter_dialog_open = true"><div>+</div></button>
     </div>
     
 
-    <!-- Critter Cards -->
+    <!-- Critter Cards / Drawer Rows -->
     <div class="critter-list">
       <button data-for="entry : critters" class="critter-card">
-        <div class="critter-card-header">
-          <span class="critter-id">ID: #{{entry.key}}</span>
-          <button class="btn-delete" data-event-click="delete_critter(entry.key)">X</button>
-        </div>
-
         <div class="critter-card-body">
-          <img class="critter-thumb" 
-            src="images/icon.tga" />
-          
+          <div class="thumb-frame">
+            <img class="critter-thumb" src="images/icon.tga" />
+          </div>
+
           <div class="critter-info">
-            <h3 class="critter-name">{{entry.value.name}}</h3>
-            <p><strong>Species:</strong> {{entry.value.species}}</p>
-            <p><strong>Gender:</strong> {{entry.value.gender}}</p>
+            <div class="critter-card-header">
+              <h3 class="critter-name">{{entry.value.name}}</h3>
+              <span class="critter-id">#{{entry.key}}</span>
+            </div>
+
+            <div class="info-pills">
+              <span class="pill"><strong>Sp:</strong> {{entry.value.species}}</span>
+              <span class="pill"><strong>Sex:</strong> {{entry.value.gender}}</span>
+            </div>
           </div>
         </div>
-      </button>
 
-      
+        <button class="btn-delete" data-event-click="delete_critter(entry.key)">X</button>
+      </button>
     </div>
 
-    
-
-    <!-- Add Critter Modal Dialog Overlay -->
+    <!-- Modals -->
     <div class="modal-overlay" data-visible="is_add_critter_dialog_open">
       <div class="modal-content">
-        <h2>Add New Critter</h2>
-
-        <p class="error" data-visible="error_message != ''">{{error_message}}</p>
-
-        <label>Name:</label>
-        <input type="text" data-value="new_critter_form.name" />
-
-        <label>Species:</label>
-        <input type="text" data-value="new_critter_form.species" />
-
-        <label>Gender (M/F):</label>
-        <input type="text" data-value="new_critter_form.gender" />
-
-        <label>Mother ID (Optional):</label>
-        <input type="text" data-value="new_critter_form.mother_id" />
-
-        <label>Father ID (Optional):</label>
-        <input type="text" data-value="new_critter_form.father_id" />
-
-        <label>Notes:</label>
-        <textarea data-value="new_critter_form.notes"></textarea>
-
+        <div class="modal-header">
+          <h2>Add New Critter</h2>
+        </div>
+        <div class="modal-body">
+          <p class="error" data-visible="error_message != ''">{{error_message}}</p>
+          <div class="form-group"><label>Name:</label><input type="text" data-value="new_critter_form.name" /></div>
+          <div class="form-row">
+            <div class="form-group half"><label>Species:</label><input type="text" data-value="new_critter_form.species" /></div>
+            <div class="form-group half"><label>Gender (M/F):</label><input type="text" data-value="new_critter_form.gender" /></div>
+          </div>
+          <div class="form-row">
+            <div class="form-group half"><label>Mother ID (Optional):</label><input type="text" data-value="new_critter_form.mother_id" /></div>
+            <div class="form-group half"><label>Father ID (Optional):</label><input type="text" data-value="new_critter_form.father_id" /></div>
+          </div>
+          <div class="form-group"><label>Notes:</label><textarea data-value="new_critter_form.notes"></textarea></div>
+        </div>
         <div class="modal-buttons">
-          <button data-event-click="is_add_critter_dialog_open = false">Cancel</button>
-          <button data-event-click="submit_add_critter">Save</button>
+          <button class="btn-cancel" data-event-click="is_add_critter_dialog_open = false">Cancel</button>
+          <button class="btn-submit" data-event-click="submit_add_critter">Save</button>
         </div>
       </div>
     </div>
 
-
-    <!-- Confirmation Dialog -->
     <div class="modal-overlay" data-visible="is_confirmation_dialog_open">
-      <div class="modal-content">
-        <h2>Confirmation</h2>
-        
-        <p class="dialog-text">{{confirmation_dialog_text}}</p>
-
+      <div class="modal-content modal-content-small">
+        <div class="modal-header"><h2>Confirmation</h2></div>
+        <div class="modal-body"><p class="dialog-text">{{confirmation_dialog_text}}</p></div>
         <div class="modal-buttons">
-          <button data-event-click="confirm_dialog_no">Cancel</button>
-          <button data-event-click="confirm_dialog_yes">Yes</button>
+          <button class="btn-cancel" data-event-click="confirm_dialog_no">Cancel</button>
+          <button class="btn-submit" data-event-click="confirm_dialog_yes">Yes</button>
         </div>
       </div>
     </div>
-
-
   </body>
 </rml>

assets/styles/main.rcss

@@ -1,29 +1,33 @@
-/* ==========================================================================
-   RCSS User Agent Defaults (Plain HTML Style)
-   ========================================================================== */
-
 * {
     box-sizing: border-box;
     font-family: "Hubballi";
 
-    --background-color: #54703f;
-    --foreground-color: #000000;
+    --background-color: #2b2d2f;   
+    --foreground-color: #f0eae1;   
+    --accent-green: #606c38;       
+    --accent-bright-green: #7d8d4c;
+    --accent-gold: #dda15e;        
+    --accent-clay: #bc6c25;        
+    --card-bg: #383b3e;            
+    --border-dark: #191a1b;        
 }
 
+/* ==========================================================================
+   Mobile-First Base Styles (scaled via dp)
+   ========================================================================== */
+
 body {
     display: block;
     width: 100vw;
     height: 100vh;
-    /* font-family: "rmlui-debugger-font"; */
-    font-size: 15pt;
+    font-size: 12dp;
     background-color: var(--background-color);
     color: var(--foreground-color);
-    margin: 0px;
-    padding: 20px;
+    margin: 0dp;
+    padding: 12dp;
 }
 
 /* Generic Structural Layout Defaults */
-
 div, section, article, header, footer, main, nav, aside {
     display: block;
 }
@@ -35,434 +39,478 @@ span, em, strong, a {
 /* Typographic Defaults */
 p {
     display: block;
-    margin: 1em 0px;
+    margin: 0dp;
 }
 
 h1, h2, h3, h4, h5, h6 {
     display: block;
     font-weight: bold;
-    margin: 0.83em 0px;
+    margin: 0dp;
 }
 
-h1 { font-size: 2em; }
+h1 { font-size: 1.6em; }
 h2 { font-size: 1.5em; }
 h3 { font-size: 1.17em; }
-h4 { font-size: 1em; }
-h5 { font-size: 0.83em; }
-h6 { font-size: 0.67em; }
 
-em {
-    font-style: italic;
-}
+em { font-style: italic; }
+strong { font-weight: bold; }
 
-strong {
-    font-weight: bold;
-}
-
-a {
-    color: #0000ee;
-    text-decoration: underline;
-}
-
-a:hover {
-    color: #551a8b;
-}
-
-blockquote {
-    display: block;
-    margin: 1em 40px;
-    padding-left: 10px;
-    border-left: 2px #cccccc;
-    color: #555555;
-}
-
-code, pre {
-    font-family: "rmlui-debugger-font";
-    background-color: #606060;
-    color: #000000;
-    padding: 3px;
-    font-style: italic;
-}
-
-pre {
-    display: block;
-    white-space: pre;
-    margin: 1em 0px;
-    padding: 8px;
-}
-
-/* Lists */
-ul, ol {
-    display: block;
-    margin: 1em 0px;
-    padding-left: 40px;
-}
-
-li {
-    display: block;
-}
-
-/* ==========================================================================
-   Tables
-   ========================================================================== */
-table {
-    display: table;
-}
-
-tr {
-    display: table-row;
-}
-
-td, th {
-    display: table-cell;
-    padding: 4px 8px;
-    text-align: left;
-}
-
-th {
-    font-weight: bold;
-    background-color: #eaeaea;
-}
-
-col {
-    display: table-column;
-}
-
-colgroup {
-    display: table-column-group;
-}
-
-thead, tbody, tfoot {
-    display: table-row-group;
-}
-
-/* ==========================================================================
-   Form Inputs & Interactive UI Components
-   ========================================================================== */
+/* Form Inputs & Interactive UI Components */
 button, input, select, textarea {
     display: inline-block;
-    font-family: "rmlui-debugger-font";
-    font-size: 14px;
-    margin: 2px;
+    font-family: "Hubballi";
+    font-size: 14dp;
+    margin: 0dp;
     vertical-align: middle;
 }
 
-button, input[type="submit"], input[type="button"] {
-    padding: 4px 12px;
-    min-width: 40px;
-    background-color: transparent;
+button {
+    padding: 6dp 16dp;
+    background-color: var(--accent-green);
     color: var(--foreground-color);
-    border: 1px var(--foreground-color);
+    border: 3dp var(--border-dark);
+    border-radius: 6dp;
     text-align: center;
+    font-weight: bold;
 }
 
-button:hover, input[type="submit"]:hover, input[type="button"]:hover {
-    background-color: transparent;
-    border: 2px var(--foreground-color);
+button:hover {
+    background-color: var(--accent-bright-green);
 }
 
-button:active, input[type="submit"]:active, input[type="button"]:active {
-    background-color: #b5b5b5;
-    border: 2px var(--foreground-color);
+button:active {
+    background-color: var(--accent-gold);
+    color: var(--border-dark);
 }
 
-/* Standard text field styling */
-input[type="text"], input[type="password"], textarea {
-    padding: 4px;
-    background-color: transparent;
+input[type="text"], textarea {
+    padding: 8dp 12dp;
+    background-color: #212325;
     color: var(--foreground-color);
-    border: 1px var(--foreground-color);
+    border: 3dp var(--border-dark);
+    border-radius: 6dp;
+    width: 100%;
 }
 
-input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
-    /* border: 1px #005aff; */
-    border-width: 2px;
+input[type="text"]:focus, textarea:focus {
+    background-color: #2b2d2f;
+    border-color: var(--accent-bright-green);
 }
 
 textarea {
     display: block;
-    /* white-space: pre-wrap; */
-    width: 300px;
-    height: 100px;
+    height: 120dp;
 }
 
-/* Select Box & Dropdowns */
-select {
-    padding: 4px;
-    background-color: #ffffff;
-    color: #000000;
-    border: 1px #767676;
-    text-align: left;
-}
-
-/* ==========================================================================
-   RmlUi Specific Elements (Tabsets, Progress Bars, etc.)
-   ========================================================================== */
-tabset {
-    display: block;
-}
-
-tabset tabs {
-    display: block;
-    border-bottom: 1px #cccccc;
-}
-
-/* Simple default layout style for built-in tabs */
-tab {
-    display: inline-block;
-    padding: 6px 12px;
-    background-color: #f0f0f0;
-    border: 1px #cccccc;
-    margin-right: 2px;
-}
-
-tab:selected {
-    background-color: #ffffff;
-    border-bottom: 1px #ffffff; /* Overlap the bottom border line */
-    font-weight: bold;
-}
-
-panel {
-    display: block;
-    padding: 10px;
-    background-color: #ffffff;
-}
-
-/* Standard HTML5 / RmlUi Progress Bar Fallback */
-progress {
-    display: inline-block;
-    width: 160px;
-    height: 20px;
-    background-color: #e6e6e6;
-    border: 1px #b0b0b0;
-}
-
-progress-value {
-    display: block;
-    height: 100%;
-    background-color: #0078d7; /* Classic Windows Blue fill */
-}
-
-/* ==========================================================================
-   Utility & Modern Layout Helpers
-   ========================================================================== */
-.flex {
-    display: flex;
-}
-
-.flex-row {
-    flex-direction: row;
-}
-
-.flex-col {
-    flex-direction: column;
-}
-
-.justify-center {
-    justify-content: center;
-}
-
-.align-center {
-    align-items: center;
-}
-
-.hidden {
-    display: none;
-}
-
-
-
-/*  ===================================
-    Specific app stuff 
-    =================================== */
+/* App Header */
 #header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 50px;
+    justify-content: space-between;
+    padding: 10dp 14dp;
+    background-color: var(--accent-green);
+    border: 3dp var(--border-dark);
+    border-radius: 8dp;
+    margin-bottom: 14dp;
+}
+
+.header-title-group {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 12dp;
+}
+
+#header h1 {
+    font-size: 1.6em;
+    color: var(--foreground-color);
+    letter-spacing: 1dp;
+}
+
+.header-tag {
+    font-size: 10dp;
+    font-weight: bold;
+    background-color: var(--border-dark);
+    color: var(--accent-gold);
+    padding: 2dp 10dp;
+    border-radius: 12dp;
 }
 
 #new-critter-btn {
-    height: 50px;
-    width: 50px;
-    border-radius: 10px;
-    font-size: 30pt;
+    height: 40dp;
+    width: 40dp;
+    border-radius: 8dp;
+    font-size: 20dp;
     display: flex;
-    text-align: center;
     align-items: center;
-    border-width: 2px;
-    border-color: var(--foreground-color);
-    background-color: transparent;
-    color: var(--foreground-color);
-    transition: border-width 0.2s linear-in-out;
-    
-}
-#new-critter-btn:hover {
-    border-width: 4px;
+    justify-content: center;
+    border: 3dp var(--border-dark);
+    background-color: var(--accent-gold);
+    color: var(--border-dark);
+    padding: 0dp;
 }
 
-/* Critter Cards Container */
+#new-critter-btn:hover {
+    background-color: var(--accent-bright-green);
+    color: var(--foreground-color);
+}
+
+/* Drawer List Styles */
 .critter-list {
     display: flex;
     flex-direction: column;
-    flex-wrap: wrap;
-    padding: 10px;
+    gap: 8dp;
 }
 
-/* Interactive Card Base */
 .critter-card {
-    display: block;
-    width: 50%;
-    margin: 10px;
-    padding: 10px;
-    background-color: transparent;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 8dp 10dp;
+    background-color: var(--card-bg);
     color: var(--foreground-color);
-    border: 2px var(--foreground-color);
+    border: 3dp var(--border-dark);
+    border-left: 10dp var(--accent-green);
+    border-radius: 6dp;
     text-align: left;
-    border-radius: 10px;
 }
 
 .critter-card:hover {
-    border: 3px var(--foreground-color);
+    background-color: #45484c;
+    border-left-color: var(--accent-bright-green);
 }
 
-.critter-card:active {
-    background-color: #222222;
-}
-
-/* Header with Small ID & Delete Button */
-.critter-card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px var(--foreground-color);
-    padding-bottom: 4px;
-    margin-bottom: 8px;
-}
-
-.critter-id {
-    font-size: 12pt;
-    color: var(--foreground-color);
-}
-
-.btn-delete {
-    padding: 2px 6px;
-    min-width: 0px;
-    font-size: 10px;
-    background-color: #aa2222;
-    color: #ffffff;
-    border: 0px;
-}
-
-.btn-delete:hover {
-    background-color: #ff3333;
-}
-
-/* Body & Thumbnail */
 .critter-card-body {
     display: flex;
+    flex-direction: row;
     align-items: center;
-}
-
-.critter-thumb {
-    width: 100px;
-    height: 100px;
-    margin-right: 10px;
-    background-color: transparent;
-    border: 1px var(--foreground-color);
-}
-
-.critter-info {
+    gap: 10dp;
     flex: 1;
 }
 
+.thumb-frame {
+    background-color: var(--accent-green);
+    border: 2dp var(--border-dark);
+    border-radius: 4dp;
+    padding: 2dp;
+}
+
+.critter-thumb {
+    width: 40dp;
+    height: 40dp;
+}
+
+.critter-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2dp;
+    flex: 1;
+}
+
+.critter-card-header {
+    display: flex;
+    align-items: baseline;
+    gap: 10dp;
+}
+
 .critter-name {
-    margin: 0px 0px 4px 0px;
-    font-size: 20pt;
+    font-size: 14dp;
+    margin: 0dp;
     color: var(--foreground-color);
 }
 
-.critter-info p {
-    margin: 2px 0px;
-    font-size: 18pt;
-    color: var(--foreground-color);
+.critter-id {
+    font-size: 9dp;
+    font-weight: bold;
+    color: var(--accent-gold);
 }
 
-/* Modals */
+.info-pills {
+    display: flex;
+    flex-direction: row;
+    gap: 8dp;
+}
+
+.pill {
+    font-size: 10dp;
+    background-color: #212325;
+    color: var(--foreground-color);
+    border: 1dp var(--accent-green);
+    padding: 1dp 6dp;
+    border-radius: 4dp;
+}
+
+.btn-delete {
+    padding: 3dp 8dp;
+    font-size: 9dp;
+    font-weight: bold;
+    background-color: var(--accent-clay);
+    color: #ffffff;
+    border: 2dp var(--border-dark);
+    border-radius: 4dp;
+}
+
+.btn-delete:hover {
+    background-color: #a3561a;
+}
+
+/* Modals Layout */
 .modal-overlay {
     position: absolute;
-    top: 0px;
-    left: 0px;
+    top: 0dp;
+    left: 0dp;
     width: 100%;
     height: 100%;
-    background-color: var(--background-color);
+    background-color: #1f1f1fdd;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .modal-content {
-    background-color: transparent;
+    background-color: var(--card-bg);
     color: var(--foreground-color);
-    border-color: var(--foreground-color);
-    border-width: 2px;
-    padding: 20px;
-    border-radius: 10px;
-    width: 80%;
-    height: 80%;
+    border: 4dp var(--border-dark);
+    border-radius: 10dp;
+    width: 94vw;
+    padding: 0dp;
+    display: flex;
+    flex-direction: column;
 }
 
-.modal-content h2 {
-    position: relative;
-    top: -65px;
-    background-color: var(--background-color);
-    text-align: center;
-    padding: 0px;
-    max-width: 300px;
+.modal-content-small {
+    width: 88vw;
+}
+
+.modal-header {
+    background-color: var(--accent-green);
+    color: #ffffff;
+    padding: 10dp 16px;
+    border-bottom: 3dp var(--border-dark);
+}
+
+.modal-header h2 {
+    font-size: 16dp;
+    color: #ffffff;
+}
+
+.modal-body {
+    padding: 14dp 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 10dp;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4dp;
+}
+
+.form-row {
+    display: flex;
+    flex-direction: column;
+    gap: 10dp;
+}
+
+.form-group.half {
+    width: 100%;
 }
 
 .modal-content label {
-    display: block;
-    margin-top: 8px;
-    font-size: 20pt;
-}
-
-.modal-content input {
-    width: 100%;
-    margin-bottom: 8px;
-    background-color: transparent;
-    font-size: 15pt;
-}
-
-.modal-content textarea {
-    width: 100%;
+    font-size: 12dp;
+    font-weight: bold;
+    color: var(--foreground-color);
 }
 
 .error {
-    color: #ff5555;
+    color: #ffffff;
     font-weight: bold;
+    padding: 8dp;
+    border: 2dp var(--border-dark);
+    background-color: var(--accent-clay);
+    border-radius: 4dp;
 }
 
 .dialog-text {
-    font-size: 25pt;
-    /* font-style: italic; */
+    font-size: 14dp;
+    color: var(--foreground-color);
+    padding: 10dp 0dp;
 }
 
 .modal-buttons {
-    margin-top: 15px;
+    padding: 12dp 16px;
+    background-color: #2b2d2f;
+    border-top: 3dp var(--border-dark);
     display: flex;
     flex-direction: row;
-    gap: 20px;
-    /* justify-content: space-between; */
-    align-items: center;
-    justify-content: center;
-    font-size: 18pt;
-    width: 100%;
+    gap: 12dp;
+    justify-content: flex-end;
 }
 
 .modal-buttons button {
-    width: 50%;
-    height: 50px;
-    font-size: 20pt;
-    line-height: 50px;
+    min-width: 90dp;
+    height: 38dp;
+    font-size: 13dp;
+}
+
+.btn-cancel {
+    background-color: #45484c;
+    color: var(--foreground-color);
+}
+
+.btn-cancel:hover {
+    background-color: #565a5f;
+}
+
+.btn-submit {
+    background-color: var(--accent-green);
+    color: #ffffff;
+}
+
+.btn-submit:hover {
+    background-color: var(--accent-bright-green);
+}
+
+/* Extra Narrow Viewports (< 380dp) */
+@media (max-width: 380dp) {
+    #header h1 {
+        font-size: 1.3em;
+    }
+
+    .critter-name {
+        font-size: 12dp;
+    }
+
+    .info-pills {
+        flex-direction: column;
+        gap: 4dp;
+    }
+}
+
+/* ==========================================================================
+   Desktop / Larger Screens Media Query (Min-Width >= 600dp)
+   ========================================================================== */
+@media (min-width: 600dp) {
+    body {
+        padding: 24dp;
+        font-size: 15dp;
+    }
+
+    textarea {
+        height: 150dp;
+    }
+
+    #header {
+        padding: 12dp 20px;
+        margin-bottom: 24dp;
+    }
+
+    .header-title-group {
+        gap: 16dp;
+    }
+
+    #header h1 {
+        font-size: 2.5em;
+    }
+
+    .header-tag {
+        font-size: 12dp;
+    }
+
+    #new-critter-btn {
+        height: 48dp;
+        width: 48dp;
+        font-size: 28dp;
+    }
+
+    .critter-list {
+        gap: 10dp;
+    }
+
+    .critter-card {
+        padding: 8dp 14dp;
+    }
+
+    .critter-card-body {
+        gap: 14dp;
+    }
+
+    .critter-thumb {
+        width: 50dp;
+        height: 50dp;
+    }
+
+    .critter-card-header {
+        gap: 12dp;
+    }
+
+    .critter-name {
+        font-size: 18dp;
+    }
+
+    .critter-id {
+        font-size: 11dp;
+    }
+
+    .pill {
+        font-size: 12dp;
+        padding: 1dp 8dp;
+    }
+
+    .btn-delete {
+        padding: 4dp 10dp;
+        font-size: 11dp;
+    }
+
+    .modal-content {
+        width: 600dp;
+    }
+
+    .modal-content-small {
+        width: 450dp;
+    }
+
+    .modal-header {
+        padding: 12dp 20px;
+    }
+
+    .modal-header h2 {
+        font-size: 20dp;
+    }
+
+    .modal-body {
+        padding: 18dp 20px;
+        gap: 12px;
+    }
+
+    .form-row {
+        flex-direction: row;
+        gap: 12dp;
+    }
+
+    .form-group.half {
+        width: 50%;
+    }
+
+    .modal-content label {
+        font-size: 14dp;
+    }
+
+    .dialog-text {
+        font-size: 18dp;
+    }
+
+    .modal-buttons {
+        padding: 14px 20px;
+    }
+
+    .modal-buttons button {
+        min-width: 120dp;
+        height: 42dp;
+        font-size: 16dp;
+    }
 }

flake.nix

@@ -9,16 +9,23 @@
   outputs = { self, nixpkgs, utils }:
     utils.lib.eachDefaultSystem (system:
       let
-        pkgs = import nixpkgs { inherit system; };
+        pkgs = import nixpkgs {
+          inherit system;
+          config = {
+            allowUnfree = true;
+            android_sdk.accept_license = true;
+          };
+        };
 
         rmlui = pkgs.stdenv.mkDerivation rec {
           pname = "rmlui";
-          version = "master";
+          version = "6.2-unstable-2026-8-7";
+
           src = pkgs.fetchFromGitHub {
             owner = "mikke89";
             repo = "RmlUi";
-            rev = "master";
-            hash = "sha256-vfFtjNHw7coXWrGgtcFyuIsu5rctW5dBJoOt8MTZwDU=";
+            rev = "9cbb5440de3e86e7031544c26116fe7b814028b9";
+            hash = "sha256-5vyrVJhmNE/msJuVSESsKhiW9Pc+peA0NTYJDVoRanA=";
           };
 
           nativeBuildInputs = [
@@ -31,14 +38,14 @@
             pkgs.lunasvg
             pkgs.lua
           ];
-          
+
           cmakeFlags = [
             "-DRMLUI_LUA_BINDINGS=ON"
             "-DRMLUI_LUA_BINDINGS_LIBRARY=lua"
             "-DRMLUI_SVG_PLUGIN=ON"
             "-DBUILD_SHARED_LIBS=ON"
-            "-DBUILD_SAMPLES=OFF"      
-            "-DBUILD_TESTING=OFF"      
+            "-DBUILD_SAMPLES=OFF"
+            "-DBUILD_TESTING=OFF"
             "-DNO_FONT_INTERFACE_DEFAULT=OFF"
           ];
         };
@@ -52,14 +59,9 @@
         ];
 
         runtimeDeps = with pkgs; [
-          raylib
-          glfw
+          sdl3
+          sdl3-image
           libGL
-          libX11
-          libXcursor
-          libXrandr
-          libXinerama
-          libXi
           wayland
           libxkbcommon
           rmlui
@@ -70,18 +72,45 @@
           sqlitecpp
           toml11
         ];
+
+        ndkVersion = "26.3.11579264";
+
+        androidComposition = pkgs.androidenv.composeAndroidPackages {
+          platformVersions = [ "34" ];
+          buildToolsVersions = [ "34.0.0" ];
+          includeNDK = true;
+          ndkVersions = [ ndkVersion ];
+          cmakeVersions = [ "3.22.1" ];
+          abiVersions = [ "arm64-v8a" ];
+          includeEmulator = false;
+        };
+
+        androidSdkRoot = "${androidComposition.androidsdk}/libexec/android-sdk";
+        androidNdkRoot = "${androidSdkRoot}/ndk/${ndkVersion}";
+
+        androidDeps = [
+          androidComposition.androidsdk
+          pkgs.gradle
+          pkgs.jdk17
+          pkgs.ninja
+        ];
       in
       {
         devShells.default = pkgs.mkShell {
-          nativeBuildInputs = buildDeps;
+          nativeBuildInputs = buildDeps ++ androidDeps;
           buildInputs = runtimeDeps;
 
           shellHook = ''
-            export CP_PATH="${pkgs.raylib}/include:${pkgs.glfw}/include:${rmlui}/include"
-            export LIBRARY_PATH="${pkgs.raylib}/lib:${pkgs.glfw}/lib:${pkgs.libGL}/lib:${rmlui}/lib"
+            export CP_PATH="${rmlui}/include"
+            export LIBRARY_PATH="${pkgs.libGL}/lib:${rmlui}/lib"
             export LD_LIBRARY_PATH="$LIBRARY_PATH:$LD_LIBRARY_PATH"
-            
-            echo "Env ready"
+
+            export ANDROID_HOME="${androidSdkRoot}"
+            export ANDROID_SDK_ROOT="${androidSdkRoot}"
+            export ANDROID_NDK_HOME="${androidNdkRoot}"
+            export ANDROID_NDK_ROOT="${androidNdkRoot}"
+
+            echo "Env ready (desktop + Android NDK ${ndkVersion}, arm64-v8a)"
           '';
         };
 

src/asset_io.hpp

@@ -0,0 +1,16 @@
+#pragma once
+
+#include <SDL3/SDL.h>
+#include <string>
+
+inline SDL_IOStream *OpenAssetFile(const std::string &virtual_path) {
+    std::string resolved = virtual_path;
+#if defined(__ANDROID__)
+    if (resolved.rfind("./assets/", 0) == 0) {
+        resolved = resolved.substr(9);
+    } else if (resolved.rfind("assets/", 0) == 0) {
+        resolved = resolved.substr(7);
+    }
+#endif
+    return SDL_IOFromFile(resolved.c_str(), "rb");
+}

src/database.cpp

@@ -1,10 +1,68 @@
 #include "database.hpp"
+#include "asset_io.hpp"
 #include <SQLiteCpp/Database.h>
+#include <SDL3/SDL.h>
 #include <iostream>
+#include <vector>
+
+std::string get_writable_db_path() {
+    char *pref = SDL_GetPrefPath("Critterfolio", "CritterFolio");
+    std::string path = pref ? pref : "./";
+    if (pref) {
+        SDL_free(pref);
+    }
+    path += "local.db";
+    return path;
+}
+
+bool ensure_db_copied() {
+    std::string dest_path = get_writable_db_path();
+
+    SDL_IOStream *check = SDL_IOFromFile(dest_path.c_str(), "rb");
+    if (check) {
+        SDL_CloseIO(check);
+        return true;
+    }
+
+    SDL_IOStream *src = OpenAssetFile("./assets/local.db");
+    if (!src) {
+        std::cout << "[ERROR] Could not open seed database in assets: " << SDL_GetError() << "\n";
+        return false;
+    }
+
+    Sint64 size = SDL_GetIOSize(src);
+    if (size < 0) {
+        std::cout << "[ERROR] Could not determine seed database size.\n";
+        SDL_CloseIO(src);
+        return false;
+    }
+
+    std::vector<Uint8> buffer(static_cast<size_t>(size));
+    if (SDL_ReadIO(src, buffer.data(), buffer.size()) != buffer.size()) {
+        std::cout << "[ERROR] Failed reading seed database.\n";
+        SDL_CloseIO(src);
+        return false;
+    }
+    SDL_CloseIO(src);
+
+    SDL_IOStream *dst = SDL_IOFromFile(dest_path.c_str(), "wb");
+    if (!dst) {
+        std::cout << "[ERROR] Could not open destination database for writing: " << SDL_GetError() << "\n";
+        return false;
+    }
+
+    bool ok = SDL_WriteIO(dst, buffer.data(), buffer.size()) == buffer.size();
+    SDL_CloseIO(dst);
+
+    if (!ok) {
+        std::cout << "[ERROR] Failed writing copied database.\n";
+    }
+    return ok;
+}
 
 bool db_get_all_critters(std::map<int, Critter> &critters) {
     try {
-        SQLite::Database db("./assets/local.db", SQLite::OPEN_READWRITE | SQLite::OPEN_CREATE);
+        SQLite::Database db(get_writable_db_path(), SQLite::OPEN_READWRITE | SQLite::OPEN_CREATE);
         SQLite::Statement q(db, "SELECT * FROM critters");
 
         critters.clear();
@@ -34,7 +92,7 @@ bool db_get_all_critters(std::map<int, Critter> &critters) {
 
 bool db_add_critter(const Critter &c, int &out_id) {
     try {
-        SQLite::Database db("./assets/local.db", SQLite::OPEN_READWRITE);
+        SQLite::Database db(get_writable_db_path(), SQLite::OPEN_READWRITE);
         SQLite::Statement q(db, "INSERT INTO critters (name, gender, mother_id, father_id, notes, species) VALUES (?, ?, ?, ?, ?, ?)");
 
         q.bind(1, c.name);
@@ -56,7 +114,7 @@ bool db_add_critter(const Critter &c, int &out_id) {
 
 bool db_delete_critter(int id) {
     try {
-        SQLite::Database db("./assets/local.db", SQLite::OPEN_READWRITE);
+        SQLite::Database db(get_writable_db_path(), SQLite::OPEN_READWRITE);
         SQLite::Statement q(db, "DELETE FROM critters WHERE id = ?");
         q.bind(1, id);
         q.exec();

src/database.hpp

@@ -4,6 +4,8 @@
 #include <map>
 #include <string>
 
+std::string get_writable_db_path();
+bool ensure_db_copied();
 bool db_get_all_critters(std::map<int, Critter> &critters);
 bool db_add_critter(const Critter &c, int &out_id);
 bool db_delete_critter(int id);

src/main.cpp

@@ -1,16 +1,16 @@
 #include "critter.hpp"
 #include "database.hpp"
 #include "ui.hpp"
+#include "sdl_file_interface.hpp"
 #include "../vendor/stb/stb_image.h"
 #include "../vendor/stb/stb_image_write.h"
-
-#include <GLFW/glfw3.h>
+#include <SDL3/SDL.h>
+#include <SDL3/SDL_main.h>
 #include <RmlUi/Core.h>
 #include <RmlUi/Core/Core.h>
 #include <RmlUi/Debugger/Debugger.h>
 #include <RmlUi/Lua/Lua.h>
 #include <RmlUi_Backend.h>
-
 #include <iostream>
 #include <map>
 #include <vector>
@@ -22,13 +22,20 @@ static std::map<int, Critter> critters;
 static std::vector<CritterEntry> critter_list;
 static Rml::ElementDocument *doc;
 static AppData app_data;
+static SDLFileInterface file_interface;
 
 void shutdown() {
     Rml::Shutdown();
     Backend::Shutdown();
+    SDL_Quit();
 }
 
 bool initialize() {
+    if (!SDL_Init(SDL_INIT_VIDEO | SDL_INIT_EVENTS)) {
+        std::cout << "[ERROR] Failed to initialize SDL3: " << SDL_GetError() << "\n";
+        return false;
+    }
+
     if (!Backend::Initialize("CritterFolio", 800, 600, true)) {
         std::cout << "[ERROR] Failed to initialize backend.\n";
         return false;
@@ -37,9 +44,16 @@ bool initialize() {
 
     Rml::SetSystemInterface(Backend::GetSystemInterface());
     Rml::SetRenderInterface(Backend::GetRenderInterface());
+    Rml::SetFileInterface(&file_interface);
     Rml::Initialise();
     Rml::Lua::Initialise();
 
+    std::cout << "[INFO] Preparing local DB...\n";
+    if (!ensure_db_copied()) {
+        std::cout << "[ERROR] Could not prepare local DB.\n";
+        return false;
+    }
+
     std::cout << "[INFO] Loading local DB...\n";
     if (!db_get_all_critters(critters)) {
         std::cout << "[ERROR] Local DB failed to initialize.\n";
@@ -49,7 +63,32 @@ bool initialize() {
 
     sync_map_to_list(critters, critter_list);
 
-    ctx = Rml::CreateContext("main", Rml::Vector2i(800, 600));
+    int window_width = 800;
+    int window_height = 600;
+    {
+        int window_count = 0;
+        SDL_Window **windows = SDL_GetWindows(&window_count);
+        if (windows && window_count > 0) {
+            SDL_GetWindowSize(windows[0], &window_width, &window_height);
+        }
+        SDL_free(windows);
+    }
+
+    ctx = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
+    std::cout << "[INFO] Context created at " << window_width << "x" << window_height << "\n";
+
+    {
+        int window_count = 0;
+        SDL_Window **windows = SDL_GetWindows(&window_count);
+        if (windows && window_count > 0) {
+            float display_scale = SDL_GetWindowDisplayScale(windows[0]);
+            ctx->SetDensityIndependentPixelRatio(display_scale);
+            SDL_Log("Display scale (dp ratio): %f", display_scale);
+        }
+        SDL_free(windows);
+    }
+    
+    SDL_Log("Context created at %dx%d", window_width, window_height);
     if (!ctx) {
         std::cout << "[ERROR] Failed to create context.\n";
         return false;
@@ -59,10 +98,10 @@ bool initialize() {
     Rml::LoadFontFace("./assets/fonts/Hubballi-Regular.ttf");
 
     Rml::Debugger::Initialise(ctx);
+
     return true;
 }
 
-
 bool load_document() {
     doc = ctx->LoadDocument("./assets/main.rml");
     if (!doc) {
@@ -82,43 +121,36 @@ bool reload_doc() {
         doc->Close();
         doc = nullptr;
     }
-
     if (!load_document()) {
         return false;
     }
-
     return true;
 }
 
-
 bool f5_was_pressed = false;
 bool f8_was_pressed = false;
-
 void handle_input() {
-    GLFWwindow *window = glfwGetCurrentContext();
-    if(window) {
-        // Reload ui
-        bool f5_state = glfwGetKey(window, GLFW_KEY_F5);
-        if (f5_state == GLFW_PRESS && !f5_was_pressed) {
+    const bool *state = SDL_GetKeyboardState(NULL);
+    if (state) {
+        bool f5_state = state[SDL_SCANCODE_F5];
+        if (f5_state && !f5_was_pressed) {
             f5_was_pressed = true;
             reload_doc();
-        } else if (f5_state == GLFW_RELEASE) {
+        } else if (!f5_state) {
             f5_was_pressed = false;
         }
-
-        // Toggle debugger window
-        bool f8_state = glfwGetKey(window, GLFW_KEY_F8);
-        if (f8_state == GLFW_PRESS && !f8_was_pressed) {
+        bool f8_state = state[SDL_SCANCODE_F8];
+        if (f8_state && !f8_was_pressed) {
             f8_was_pressed = true;
             bool is_visible = Rml::Debugger::IsVisible();
             Rml::Debugger::SetVisible(!is_visible);
-        } else if (f8_state == GLFW_RELEASE) {
+        } else if (!f8_state) {
             f8_was_pressed = false;
         }
     }
 }
 
-int main() {
+int main(int arc, char *argv[]) {
     std::cout << "[INFO] Starting CritterFolio...\n";
 
     is_initalized = initialize();
@@ -127,10 +159,10 @@ int main() {
         shutdown();
         return 1;
     }
-
     is_running = true;
 
     Rml::DataModelHandle app_data_handle;
+
     if (!setup_data_binding(ctx, app_data_handle, app_data, critter_list, critters)) {
         shutdown();
         return 1;
@@ -140,15 +172,33 @@ int main() {
         shutdown();
         return 1;
     }
-    std::cout << "[INFO] Main page loaded.\n";
 
-    
+    std::cout << "[INFO] Main page loaded.\n";
 
     while (is_running) {
         is_running = Backend::ProcessEvents(ctx);
 
+        {
+            int window_count = 0;
+            SDL_Window **windows = SDL_GetWindows(&window_count);
+            if (windows && window_count > 0) {
+                int current_width = 0, current_height = 0;
+                SDL_GetWindowSize(windows[0], &current_width, &current_height);
+                
+                float display_scale = SDL_GetWindowDisplayScale(windows[0]);
+                
+                if (Rml::Vector2i(current_width, current_height) != ctx->GetDimensions()) {
+                    ctx->SetDimensions(Rml::Vector2i(current_width, current_height));
+                }
+                
+                if (display_scale != ctx->GetDensityIndependentPixelRatio()) {
+                    ctx->SetDensityIndependentPixelRatio(display_scale);
+                }
+            }
+            SDL_free(windows);
+        }
+        
         handle_input();
-
         ctx->Update();
         Backend::BeginFrame();
         ctx->Render();
@@ -157,4 +207,4 @@ int main() {
 
     shutdown();
     return 0;
-}
+}

src/sdl_file_interface.hpp

@@ -0,0 +1,37 @@
+#pragma once
+
+#include "asset_io.hpp"
+#include <RmlUi/Core/FileInterface.h>
+#include <SDL3/SDL.h>
+
+class SDLFileInterface : public Rml::FileInterface {
+public:
+    Rml::FileHandle Open(const Rml::String &path) override {
+        SDL_IOStream *io = OpenAssetFile(path);
+        return reinterpret_cast<Rml::FileHandle>(io);
+    }
+
+    void Close(Rml::FileHandle file) override {
+        SDL_CloseIO(reinterpret_cast<SDL_IOStream *>(file));
+    }
+
+    size_t Read(void *buffer, size_t size, Rml::FileHandle file) override {
+        return SDL_ReadIO(reinterpret_cast<SDL_IOStream *>(file), buffer, size);
+    }
+
+    bool Seek(Rml::FileHandle file, long offset, int origin) override {
+        SDL_IOWhence whence = SDL_IO_SEEK_SET;
+        if (origin == SEEK_CUR) whence = SDL_IO_SEEK_CUR;
+        else if (origin == SEEK_END) whence = SDL_IO_SEEK_END;
+
+        return SDL_SeekIO(reinterpret_cast<SDL_IOStream *>(file), offset, whence) >= 0;
+    }
+
+    size_t Tell(Rml::FileHandle file) override {
+        return static_cast<size_t>(SDL_TellIO(reinterpret_cast<SDL_IOStream *>(file)));
+    }
+
+    size_t Length(Rml::FileHandle file) override {
+        return static_cast<size_t>(SDL_GetIOSize(reinterpret_cast<SDL_IOStream *>(file)));
+    }
+};