* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

body {
    font-family: "Aharoni", "David", "Arial Hebrew", system-ui, sans-serif;
    background: #f6f3ea;
    min-height: 100vh;
    color: #222;
}

body.app-mode {
    background: #000;
    overflow: hidden;
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

body.app-mode main {
    max-width: none;
    padding: 0;
    height: 100vh;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    color: #2c2c2c;
}

/* === App selector === */

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
}

.app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    text-decoration: none;
    color: inherit;
    font-size: 1.2rem;
    transition: transform .15s, box-shadow .15s;
}

.app-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.app-tile img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

/* === Faithful .frm renderer === */

.frm-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.frm-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    background: #000;
    /* Controls that fall outside the visible BG region are clipped here —
       matches VB6's maximize-to-640x480 clipping behaviour. */
    overflow: hidden;
    /* The original VB6 forms aren't browsable: you can't drag-select text or
       images, can't long-press a tile to get a "save image" callout. Disable
       all of that on the stage so the games feel app-native, not web-native. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.frm-stage img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Mirror VB6's Timer1_Timer / Timer2_Timer: while MMControl2.Mode = 526
   (any audio playing), the original swaps the act1 button picture to its
   "_2" disabled sprite (nex2.bmp, sanb2.bmp, sana2.bmp, sev2.bmp) so the
   user can see it's inert. We approximate that with a CSS dim on every
   control marked data-audio-gated when the stage is in audio-busy mode.
   Click handlers also short-circuit on audioBusy — the dim is purely the
   "you can see it" half of the original behaviour.  */
.frm-stage.audio-busy [data-audio-gated="1"] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: saturate(0.6);
    transition: opacity .08s ease, filter .08s ease;
}

.frm-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

/* VB6 form.Picture is drawn at natural size at (0,0) — no stretching.
   This rule mirrors that behavior for our faithful renderer. */
.frm-bg--native {
    inset: auto;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    object-fit: none;
}

.frm-container {
    /* PictureBox / Frame container that holds child controls.
       No visual styling — just a positioned wrapper so children
       inherit absolute positioning relative to it. */
    background: transparent;
}

/* Image bound to a control via screenConf.images. Fills its parent control,
   matching the VB6 PictureBox.Picture stretching behaviour we use here. */
.frm-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

/* Picture1 on game forms: receives clicks (wrong-answer detection) and
   clips the stage image to its bounds. Image is rendered at NATURAL pixel
   size from (0,0), matching VB6 PictureBox.Picture behaviour, so .RAS
   hotspot coords (image-pixel space) align directly. */
.frm-ctrl--Picture1 {
    cursor: pointer;
    overflow: hidden;
}

.stage-hotspot {
    /* Invisible but clickable. Becomes visible briefly only when game logic
       calls showHint() / flashGame3Hotspot(). Original VB6 PictureBox has no
       :hover styling — earlier hover tint here was giving away answers to
       the player on mouse-over. Removed: see commit history. */
    transition: background .15s, outline .15s;
}

/* Game type 4 (place missing parts) — slots are visible empty rectangles.
   When a piece is placed, the outline goes away and the original image
   patch is uncovered. */
.stage-hotspot--empty {
    background: rgba(255, 255, 255, .35) !important;
    outline: 2px dashed rgba(255, 255, 255, .75);
}

.stage-hotspot--placed {
    background: transparent !important;
    outline: none;
}

.stage-hotspot--target.stage-hotspot--empty {
    outline: 2px solid #fbcf66;
    background: rgba(251, 207, 102, .25) !important;
}

/* Game 5 multi-choice Picture2 buttons. Original Games5.frm has no
   Picture2 hover styling (no MouseMove handler that re-paints them); a
   scale-on-hover would let the player identify candidates by feel. Keep
   them static. */
.stage-game5-choice {
    border: 2px solid #fbcf66;
    border-radius: 4px;
    background: #000;
}

/* No unconditional Picture2 styling — the original keeps these controls
   hidden until game logic (Choice_Pic, helek state machine, etc.) reveals
   them. CSS now applies via inline canvases inside the controls when they
   become visible. */


.frm-ctrl {
    position: absolute;
}

.frm-hotspot {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: transparent;
    font: inherit;
    /* Strip every default <button> chrome the user-agent stylesheet adds.
       Without `appearance: none`, Chromium on Linux still draws a faint
       grey raised border + 1px outline shift, which was visible at the
       Main.endof top-right "x" position. */
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-shadow: none;
    text-shadow: none;
}
.frm-hotspot:focus,
.frm-hotspot:focus-visible {
    outline: none;
    box-shadow: none;
}

.frm-hotspot:hover {
    background: rgba(255, 255, 0, .12);
}

/* Debug mode — visible outlines on every control for layout verification. */
.frm-stage--debug .frm-ctrl {
    outline: 1px solid rgba(255, 80, 80, .8);
    background: rgba(255, 80, 80, .08);
}

.frm-stage--debug .frm-ctrl::before {
    content: attr(data-name) attr(data-index);
    position: absolute;
    top: -1px;
    right: 1px;
    font-size: 9px;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    padding: 0 3px;
    line-height: 11px;
    white-space: nowrap;
    pointer-events: none;
}

.frm-tip {
    background: rgba(255, 255, 220, .95);
    color: #222;
    border: 1px solid #c0a000;
    padding: 2px 6px;
    font-size: 11px;
    transition: opacity .15s;
    pointer-events: none;
    white-space: nowrap;
    z-index: 50;
}

/* === Misger modal (exit / mid-game stage chooser) === */

.misger-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.misger-box {
    /* Inherits inline width/height (240x200 * scale) from JS.
       Background image set inline. */
}

/* Legacy exit modal (now unused; left for compat) */
.exit-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.exit-modal__box {
    /* Original misger.frm is 240x200 (299x249 design). We scale up for
       legibility on modern displays while keeping the same aspect. */
    width: 360px;
    min-height: 300px;
    background: #004000 center/cover no-repeat;
    border: 3px solid #8a5b13;
    border-radius: 14px;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
}

.exit-modal--game .exit-modal__box {
    width: 400px;
    min-height: 340px;
    gap: 1rem;
}

.exit-modal__row {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.exit-modal__label {
    color: #fbcf66;
    font-size: 1rem;
    font-weight: 700;
    text-shadow: none;
}

.exit-modal__select {
    background: rgba(0,0,0,.55);
    color: #fbcf66;
    border: 2px solid #fbcf66;
    border-radius: 6px;
    padding: .35rem .6rem;
    font-family: inherit;
    font-size: 1rem;
    direction: rtl;
}

.exit-modal__row button {
    background: rgba(0,0,0,.55);
    color: #fbcf66;
    border: 2px solid #fbcf66;
    border-radius: 999px;
    padding: .35rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    text-shadow: none;
}

.exit-modal__row button:hover {
    background: #fbcf66;
    color: #1a1408;
}

.exit-modal__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-top: 1.2rem;
}

.exit-modal__buttons {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin-bottom: .8rem;
}

.exit-modal__buttons button {
    min-width: 90px;
    padding: .55rem 1.4rem;
    border: 2px solid #fbcf66;
    background: rgba(0,0,0,.55);
    color: #fbcf66;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    text-shadow: none;
}

.exit-modal__buttons button:hover {
    background: #fbcf66;
    color: #1a1408;
}

.exit-modal__buttons button[data-yes] {
    border-color: #ff8a8a;
    color: #ff8a8a;
}

.exit-modal__buttons button[data-yes]:hover {
    background: #c84040;
    color: #fff;
    border-color: #c84040;
}

/* === Lmath ladybug-math mini-game (Heshbon Sst.Picture2_Click) === */

.lmath-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.lmath-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 480px;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

.lmath-stage img,
.lmath-stage button { user-select: none; }

.lmath-flower {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

.lmath-flower.lmath-eaten { opacity: .92; }

/* Cmda digit button — frame 43×43 (twips 645÷15), n#.png is 40×40 natural;
   draw centered inside the frame at natural size (no stretch). */
.lmath-cmda {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px 40px;
    image-rendering: pixelated;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform .08s ease;
}
.lmath-cmda:not(:disabled):hover { transform: scale(1.08); }
.lmath-cmda:disabled { opacity: .65; cursor: default; }
.lmath-cmda:active { transform: scale(.95); }

.lmath-siv {
    image-rendering: pixelated;
    pointer-events: none;
}

/* Picture1 — main ladybug "threat". Single img with src swap per frame.
   Smooth transition for the 1px per-tick walk + larger push-back jumps. */
.lmath-bug {
    pointer-events: none;
    image-rendering: pixelated;
    transition: left .15s linear;
}

/* shpup — progress indicator (where player has answered up to). Hops between
   columns on each correct answer. Sits 52px above the threat ladybug. */
.lmath-shpup {
    pointer-events: none;
    image-rendering: pixelated;
}

/* targ — big play/pause button on the right; uses targ0/targ1 PNGs. */
.lmath-targ {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0;
    padding: 0;
    cursor: pointer;
    image-rendering: pixelated;
}
.lmath-targ:hover { filter: brightness(1.1); }

.lmath-shad {
    image-rendering: pixelated;
    pointer-events: none;
    opacity: .65;
}

.lmath-arrows {
    color: #400000;
    font: 700 24px "Aharoni", "David", serif;
    text-align: center;
    line-height: 31px;
    pointer-events: none;
    animation: lmath-arrow-blink 0.9s steps(2) infinite;
    letter-spacing: 2px;
}
@keyframes lmath-arrow-blink {
    50% { opacity: 0; }
}

/* Invisible click hotspots — original Label2 (× exit) and help Label have
   BackStyle=0 (transparent) and no Caption. They're click targets only. */
.lmath-hotspot {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.lmath-hotspot:hover {
    background: rgba(255, 255, 255, .12);
    outline: 1px dashed rgba(255, 255, 255, .4);
}

/* Debug overlay — LmathGame._debug.overlay(true). Outlines every hotspot /
   control so layout positions are visible against the bg artwork. */
.lmath-debug-on .lmath-hot,
.lmath-debug-on .lmath-hotspot,
.lmath-debug-on .lmath-targ,
.lmath-debug-on .lmath-cmda,
.lmath-debug-on .lmath-end,
.lmath-debug-on .lmath-settings-go,
.lmath-debug-on .lmath-settings-x {
    outline: 2px solid #f0f;
    background-color: rgba(255, 0, 255, .15);
}
.lmath-debug-on .lmath-bug,
.lmath-debug-on .lmath-shpup {
    outline: 2px dashed #0ff;
}
.lmath-debug-on .lmath-hot::after,
.lmath-debug-on .lmath-hotspot::after {
    content: attr(title);
    position: absolute;
    top: -16px;
    left: 0;
    background: #f0f;
    color: #fff;
    font: 700 10px monospace;
    padding: 1px 4px;
    white-space: nowrap;
    pointer-events: none;
}

/* Start screen — invisible click-through hotspots over rac.png. */
.lmath-hot {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.lmath-hot:hover {
    background: rgba(255, 255, 255, .12);
    outline: 1px dashed rgba(255, 255, 255, .4);
}
.lmath-exit { border-radius: 50%; }

/* Settings (Form2) — sliders + buttons over ba2.png. */
.lmath-slider {
    background: rgba(255, 255, 255, .85);
    border: 2px solid #888;
    border-radius: 8px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    font-family: "Aharoni", "David", sans-serif;
    font-weight: 700;
    color: #333;
}
.lmath-slider label { white-space: nowrap; }
.lmath-slider span {
    min-width: 28px;
    text-align: center;
    color: #b00;
    font-size: 18px;
}
.lmath-slider input[type=range] {
    flex: 1; min-width: 90px;
    /* The .lmath-slider container is RTL (so label/value/track flow right→left
       like Hebrew text). Modern browsers flip <input type=range> with the
       parent's direction — low value to the right, high to the left. That
       reads as "reversed" because the user expects thumb→right = more.
       Force the slider track LTR; the container's RTL still arranges the
       label/value around it. */
    direction: ltr;
}

.lmath-settings-go,
.lmath-settings-x {
    background: #fee0e4;
    border: 2px solid #aa4060;
    border-radius: 10px;
    font: 400 26px "David", serif;
    cursor: pointer;
    color: #400;
}
.lmath-settings-go:hover { background: #ffd0d8; }
.lmath-settings-x:hover  { background: #ffd0d8; }

/* Win / Lose end buttons (Form3/Form4 cndgo + cmdx using caf2/caf1.bmp). */
.lmath-end {
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    cursor: pointer;
    padding: 0;
    transition: transform .1s ease;
}
.lmath-end:hover  { transform: scale(1.08); }
.lmath-end:active { transform: scale(.96); }

/* Win-screen petal confetti — original Form3 flat_Timer/flatp_Timer paint
   fla(7..9) and fla(0..5) at scattered positions, accumulating. Our port
   makes them FALL from above to a random ground spot, spinning along the
   way (var --rot is randomized per petal in JS), then STICK there
   (animation-fill-mode forwards). */
.lmath-petal-wrap {
    pointer-events: none;
    will-change: transform;
}
.lmath-petal {
    image-rendering: pixelated;
    pointer-events: none;
}
@keyframes lmath-petal-drop {
    from { transform: translateY(0)             rotate(0deg);          }
    to   { transform: translateY(var(--land-y)) rotate(var(--rot));    }
}