/* Minimal styling for the wrapper. The legacy app/stylesheets/paratrooper.css
   is not in the repo, so per-scene look-and-feel will need a port pass.
   This file only handles the landing scene + scene container layout. */

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: -apple-system, system-ui, "Helvetica Neue", sans-serif;
    overflow: hidden;
    height: 100%;
    width: 100%;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.mojo-scene {
    position: absolute;
    inset: 0;
    /* Centre the legacy 768×1024 wrapper in whatever viewport we're in.
       The wrapper itself keeps its original pixel dimensions; we visually
       scale it via a CSS variable updated on resize (mojo-shim.js). */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* `.mojo-scene #wrapper` is the 768×1024 game frame. Everything inside the
   game scene (canvas, background, message overlay, score, back button)
   positions absolutely against this wrapper, so they all move and scale
   together rather than each one separately anchoring to the viewport.
   Overrides paratrooper.css (loaded earlier; later rule wins). */
.mojo-scene #wrapper {
    position: relative;
    width: 768px;
    height: 1024px;
    flex: 0 0 auto;             /* flex centring without squishing */
    transform: scale(var(--paratrooper-scale, 1));
    transform-origin: center center;
    /* Cancel paratrooper.css's `top: -26px` which was for the Pre's status bar. */
    top: 0;
    left: 0;
}

/* Welcome scene uses #startpage instead of #wrapper, but the same idea:
   give it a fixed 768×1024 frame and scale uniformly. */
.mojo-scene #startpage {
    position: relative;
    width: 768px;
    height: 1024px;
    flex: 0 0 auto;
    transform: scale(var(--paratrooper-scale, 1));
    transform-origin: center center;
    /* Override paratrooper.css `top: -26px; left: 0; height: 100%; width: 100%`. */
    top: 0;
    left: 0;
}

/* Make the welcome splash fill its frame so it scales with the wrapper. */
.mojo-scene #startpage > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Background div fills #wrapper so the per-level bg image scales with the
   wrapper instead of staying anchored to its native dimensions. */
.mojo-scene #bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

/* The "tap to begin" span inside the level-intro / level-passed popup.
   paratrooper.css gives it `position: absolute; width: 100%; text-align: center;`
   without `left`. With `left: auto` the static position depends on the
   parent's text-align: center, so the span ends up offset to ~half the
   message width — drifting off to the right on every popup. Pin it to 0. */
.mojo-scene #message #click {
    left: 0;
    right: 0;
    width: auto;
}

/* ------------------------------------------------------------------------
   chooseLevel scene
   The original webOS Mojo framework provided default styling for List
   widgets (palm-group, palm-row, palm-group-title) that gave each row a
   ~60–70px tap target with a dark group header. paratrooper.css only
   adds tweaks on top — without the framework defaults rows are 18px high
   and effectively unusable on a phone. We replace those defaults here.
   ------------------------------------------------------------------------ */

/* Override .mojo-scene flex centering for list-style scenes — the list is
   tall, may scroll, and should anchor to the viewport top. */
.mojo-scene--chooseLevel,
.mojo-scene--scores,
.mojo-scene--help {
    display: block;
    overflow-y: auto;
    background: #1a1a1a;
}

.mojo-scene--chooseLevel .palm-group,
.mojo-scene--scores .highScores,
.mojo-scene--help #help {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0 60px 0;
}

.mojo-scene--chooseLevel .palm-group-title {
    position: sticky;
    top: 0;
    background: #2a2a2a;
    color: #fff;
    padding: 18px 60px 18px 16px;   /* right padding leaves room for #back */
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    z-index: 1;
}
.mojo-scene--chooseLevel .palm-group-title #back {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 56px;
    height: 31px;
    margin: 0;
    cursor: pointer;
}
.mojo-scene--chooseLevel .palm-group-title #back img {
    width: 100%;
    height: 100%;
}

.mojo-scene--chooseLevel .palm-list {
    padding: 0;
}

.mojo-scene--chooseLevel .mojo-list-row {
    cursor: pointer;
    border-bottom: 1px solid #444;
}

.mojo-scene--chooseLevel .mojo-list-row .palm-row {
    /* Replace paratrooper.css `.palm-row { background: #ddd; opacity: 0.75 }`
       which made rows look perpetually disabled. Specificity wins. */
    min-height: 64px;
    padding: 14px 18px;
    background: #f5f5f5;
    opacity: 1;
    display: flex;
    align-items: center;
    color: #222;
    font-size: 18px;
}
.mojo-scene--chooseLevel .mojo-list-row:active .palm-row {
    background: #ffd06b;
}
@media (hover: hover) {
    .mojo-scene--chooseLevel .mojo-list-row:hover .palm-row {
        background: #fff3d6;
    }
}

.mojo-scene--chooseLevel .palm-row .title {
    flex: 1 1 auto;
    font-weight: 600;
    /* paratrooper.css set `.title.left` styles; reset to play nice with flex. */
    float: none;
}

/* Locked levels are emitted from the assistant as `<span style='color:#999'>`.
   Boost contrast so it's obvious which rows are tappable. */
.mojo-scene--chooseLevel .palm-row .title span[style*="#999"] {
    color: #888 !important;
    font-weight: 400;
    font-style: italic;
}

/* Group-row level count badge (e.g. "0/12"). */
.mojo-scene--chooseLevel .palm-row .levelInfo {
    flex: 0 0 auto;
    margin: 0 0 0 12px;
    padding: 4px 10px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-family: monospace;
    /* Override paratrooper.css `display: inline; float: right` */
    float: none;
    width: auto;
}

/* Score chart inside a level row: paratrooper.css positions it floated right
   with `margin-top: -5px`. Re-anchor for our flex row. */
.mojo-scene--chooseLevel .palm-row .scores {
    flex: 0 0 auto;
    margin: 0 0 0 12px;
    float: none;
}

/* "Create New Level..." add-row, when in user mode. */
.mojo-scene--chooseLevel .mojo-list-add-row .palm-row {
    background: #2a2a2a;
    color: #ffd06b;
    justify-content: center;
    font-weight: 600;
}

/* ------------------------------------------------------------------------
   scores scene
   ------------------------------------------------------------------------ */

.mojo-scene--scores .highScores {
    color: #eee;
    padding-top: 24px;
}
.mojo-scene--scores .highScores h1,
.mojo-scene--scores .highScores h2 {
    color: #eee;
    text-align: center;
}
.mojo-scene--scores #back {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 56px;
    height: 31px;
    cursor: pointer;
    z-index: 2;
}

/* ------------------------------------------------------------------------
   help scene
   ------------------------------------------------------------------------ */
.mojo-scene--help #help {
    color: #eee;
    padding-top: 24px;
}

/* ------------------------------------------------------------------------
   In-game .newhighscore popup
   Used by game-assistant for four dialogs:
     - confirmBack:  Resume Play / Quit
     - newHighScore: Skip / Submit  (with username input)
     - submitName:   Skip (single button, post-submit "Saving…")
     - (h2 + .palm-button divs in all cases)
   The Mojo framework's default .palm-button styling isn't in this repo,
   so without overrides the buttons render as small unpadded text with
   no spacing. Apply consistent sizing + layout for every variant.
   ------------------------------------------------------------------------ */

/* Let the popup grow vertically to fit the larger buttons. Inline `height`
   on #message is used by other popups (level-intro etc.), so scope this
   override to messages whose body is .newhighscore. */
.mojo-scene--game #message:has(.newhighscore) {
    height: auto !important;
    min-height: 280px;
    padding-bottom: 22px;
}

.newhighscore #uname {
    font-size: 20px;
    padding: 8px 10px;
    margin-top: 8px;
}

.newhighscore .palm-button {
    margin-top: 32px;
    padding: 16px 0;
    width: 45%;
    float: left;
    clear: none;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: 10px;
    background: #555;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}
/* `.affirmative` always denotes the right-hand action button (Quit, Submit). */
.newhighscore .palm-button.affirmative {
    float: right;
    background: #ff9b1a;
    color: #000;
}
/* The submitName "Saving…" dialog has a single non-affirmative Skip button.
   Override the float pair so it centres. */
.newhighscore #skipit {
    float: none;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}