/* Hemed / Nivim — fixed 800×600 stage rendered against the original
   VB6 hand-painted backgrounds. Controls overlay at .frm pixel coords
   (twips/15) so the layout matches the source forms 1:1. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    background: #000;
    color: #2a1d0a;
    font-family: "David CLM", "Arial Hebrew", "Heebo", "Segoe UI", Arial, sans-serif;
    overflow: hidden;
}

/* Stage = the original 800×600 form canvas. fit-to-viewport via JS so
   the BG art stays sharp without distortion. */
#app {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stage {
    position: relative;
    width: 800px;
    height: 600px;
    background-color: #87b9d6;
    background-position: center;
    background-size: 800px 600px;
    background-repeat: no-repeat;
    transform-origin: center center;
    overflow: hidden;
    direction: rtl;
    color: #2a1d0a;
    font-size: 16px;
    user-select: none;
}

/* Every overlay control is absolutely positioned in design pixels. */
.ctrl {
    position: absolute;
    box-sizing: border-box;
}

/* Round corner buttons used for CmdExit / CmdHelp on every screen.
   Original is the Tzemed_Hemed.CmdPlus custom control — a rounded
   wood-tone button. The exit/help PNG images live under Main/. */
.cmd-icon {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 50;
}
.cmd-icon:hover { filter: brightness(1.08); }

/* Game-overlay container — must not swallow clicks aimed at the corner
   nav icons. Children opt back into pointer events. */
.game-root { pointer-events: none; }
.game-root > * { pointer-events: auto; }

.exit-icon {
    /* Hardcoded position from MainForm.frm CmdExit (L=75, T=30, W=825, H=825).
       At twips/15 → (5, 2, 55, 55) px. */
    left: 5px; top: 2px; width: 55px; height: 55px;
}
.exit-icon[data-app="Hemed"], .exit-icon[data-app="Nivim"] {
    background-image: url("../assets/Hemed/pictures/exit_on.png");
}
.exit-icon[data-app="Hemed"]:hover, .exit-icon[data-app="Nivim"]:hover {
    background-image: url("../assets/Hemed/pictures/exit_down.png");
}
.help-icon {
    /* CmdHelp (L=11100, T=30, W=825, H=825). */
    left: 740px; top: 2px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/help_on.png");
}
.help-icon:hover {
    background-image: url("../assets/Hemed/pictures/help_down.png");
}

/* Text overlays sitting on top of the painted scenes. The leaf
   background already holds the labels for "name", "rama", "entry";
   the inputs/selectors just need to drop in at the matching pixel. */
.field-input,
.field-select {
    background: rgba(255,255,255,0.85);
    border: 1px solid #5b3a14;
    border-radius: 6px;
    padding: 4px 10px;
    color: #2a1d0a;
    font: inherit;
    font-size: 1rem;
    text-align: center;
    outline: none;
}
.field-input:focus, .field-select:focus { background: #fff; border-color: #b88840; }

/* "כניסה לתרגול" entry-arrow button (CmdShowUnits L=3840 T=4560
   W=4215 H=855 → 256, 304, 281, 57). Original is a transparent
   click-through with the leaf art showing the arrow. */
.entry-btn {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: transparent;   /* the arrow is in the leaf BG */
}
.entry-btn:hover { border-color: rgba(255, 215, 100, 0.9); background: rgba(255, 220, 120, 0.15); }

.sub-btn {
    background: transparent;
    border: 1px dashed transparent;
    cursor: pointer;
    color: transparent;
}
.sub-btn:hover { border-color: rgba(255, 215, 100, 0.7); background: rgba(255, 220, 120, 0.1); }

/* User-name banner — orig UnitListForm.frm Form_Paint:411-412 prints
   UserName at (400, 5) in RGB(100,100,250) over RGB(50,50,150) as a
   two-pass shadow. We use text-shadow to stack the colors. */
.unit-list-user {
    left: 0; right: 0; top: 5px;
    text-align: center;
    font: 700 22pt "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    color: rgb(100, 100, 250);
    text-shadow: 0 1px 0 rgb(50, 50, 150);
    pointer-events: none;
    direction: rtl;
    z-index: 9;
}

/* Trailing padding "blank row" so the last unit isn't hidden under the
   bottom edge of the scrollbar — orig ReLoadForm:479 adds an empty
   item if AddBlank=True. */
.unit-scroll .row.unit-list-pad,
.score-col   .cell.unit-list-pad {
    height: 24px;
    cursor: default;
    pointer-events: none;
}

/* --- Unit list (parchment scroll) -----------------------------------
   Original: ListPlus UnitList renders subject headers in RGB(0,20,90) at
   24pt, unit rows in RGB(50,100,0) at 20pt. ScoreList sits to the left
   and stays scroll-locked with UnitList. */
.unit-scroll {
    /* UnitList L=3600 T=1920 W=5295 H=6900 → 240, 128, 353, 460.
       Orig ListPlus.ctl UserControl_Resize:381-388 — MyMargins=5 on
       all sides, ScrollPlus.Width=25, so the inner content area is:
         container.Width  = 353 - 25 - 15 = 313
         container.Height = 460 - 10      = 450
         container.Top    = 5; container.Left = 5
       Translates to padding: top/left/bottom = 5 px, right reserves
       5 (margin) + 25 (bar) + 5 (margin) = 35 px. */
    left: 240px; top: 128px; width: 353px; height: 456px;
    overflow-y: scroll;
    padding: 5px 35px 5px 5px;
    direction: rtl;
    /* Hide native scrollbar across all browsers — we render our own. */
    scrollbar-width: none;
    /* Soft 4 px fade at top + bottom edges of the visible list area —
       rows scroll in/out gently instead of getting clipped at a hard
       line. Same mask applied to .score-col so both columns fade
       together. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 4px,
        #000 calc(100% - 4px),
        transparent 100%);
            mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 4px,
        #000 calc(100% - 4px),
        transparent 100%);
}
.unit-scroll::-webkit-scrollbar { display: none; }
/* Custom scrollbar — pixel-perfect match to orig ListPlus + ScrollPlus.
   Geometry from ListPlus.ctl UserControl_Resize:381-389:
     MyMargins = 5
     ScrollPlus.Width  = 25
     ScrollPlus.Top    = MyMargins                            = 5
     ScrollPlus.Height = container.Height = UserControl.ScaleHeight - 10
                                          = 460 - 10           = 450
     ScrollPlus.Left   = container.Width + MyMargins * 2
                       = (353 - 25 - 15) + 10                  = 323
   Absolute screen position = unit-scroll(240,128) + (323, 5) = (563, 133).
   mot.png is the BAR background (its 20 px transparent top aligns with
   the up button position) — NOT just the inner track. The track div is
   transparent overlay; buttons + thumb sit on top. */
.unit-scroll-bar {
    left: 563px; top: 133px; width: 25px; height: 446px;
    z-index: 5;
    user-select: none;
}
.unit-scroll-up,
.unit-scroll-down {
    position: absolute; left: 0; width: 25px; height: 20px;
    border: none; padding: 0;
    background-color: transparent;
    background-size: 25px 20px; background-repeat: no-repeat;
    cursor: pointer;
    z-index: 2;
}
.unit-scroll-up   { top: 0;     background-image: url("../assets/Hemed/pictures/UnitList/listup.png"); }
.unit-scroll-down { top: 426px; background-image: url("../assets/Hemed/pictures/UnitList/listdown.png"); }
/* Track — mot.png as background, sized to fit BETWEEN buttons only
   (y=20..426). mot.png is native 25×440 with a 20 px transparent top;
   we shift the asset up by 20 px so the transparent header sits ABOVE
   the visible track area, leaving the opaque cream pattern (asset y=
   20..440 = 420 px) to fill the 406 px track with minimal stretch. */
.unit-scroll-track {
    position: absolute; left: 0; top: 20px; width: 25px; height: 406px;
    z-index: 1;
    cursor: pointer;
    background-image: url("../assets/Hemed/pictures/UnitList/mot.png");
    background-size: 25px 440px;
    background-repeat: no-repeat;
    background-position: 0 -20px;
}
.unit-scroll-thumb {
    position: absolute; left: 0; width: 25px;
    /* Height set inline by JS to 20 px (= orig CmdHW = CmdMove minimum).
       listm.png native is 25×40; stretched to fit by orig CmdPlus's
       PaintPicture, so we match with background-size 100%/100%. */
    background-image: url("../assets/Hemed/pictures/UnitList/listm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: grab;
}
.unit-scroll-thumb:active { cursor: grabbing; }
/* Both columns share the same per-row heights so the scores line up
   exactly with their unit row. Tightened to match orig screenshot
   density (14 rows fit visibly in the 450 px tall content area).
   Per orig ReLoadForm:455,464 the fonts are 24pt header / 20pt unit,
   but rows themselves are tight (no extra padding) — ListPlus
   auto-fits row height = font + small inline margin. */
.unit-scroll .row,
.score-col   .cell {
    box-sizing: border-box;
    padding: 1px 6px;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.0;
}
.unit-scroll .row.header,
.score-col   .cell.header {
    height: 30px;
    padding-top: 6px;
    padding-bottom: 2px;
    font-size: 1.25rem;
    font-weight: 700;
}
.unit-scroll .row.header { color: rgb(0, 20, 90); text-align: right; }
.score-col   .cell.header { color: rgb(0, 20, 90); text-align: center; }
.unit-scroll .row.unit,
.score-col   .cell.unit {
    height: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 1.05rem;
}
.unit-scroll .row.unit  {
    color: rgb(50, 100, 0); cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    direction: rtl;
}
.unit-scroll .row.unit .row-name { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.unit-scroll .row.unit .row-idx  { flex: 0 0 auto; font-size: 0.85rem; opacity: 0.7; direction: ltr; }
.score-col   .cell.unit { color: rgb(50, 100, 0); font-weight: 700; text-align: center; }
.unit-scroll .row.unit:hover  { background: rgba(184, 136, 64, 0.15); }
/* Selected row — orig ListPlus.ctl:570-572:
     If SelectPic = 0 Then Set SelectPic = DefaultSelectListPicture
     container.PaintPicture SelectPic, 0, ...
   `DefaultSelectListPicture` is a built-in StdPicture default — the
   classic Windows system selection bitmap (a soft sky-blue gradient).
   It's NEVER explicitly assigned in any of the .ctl/.bas/.frm source,
   so every selected row gets that default. Mirror it with a light
   blue translucent overlay + thin top/bottom edges. */
.unit-scroll .row.unit.sel,
.score-col   .cell.unit.sel  {
    background: linear-gradient(
        to bottom,
        rgba(170, 200, 235, 0.55),
        rgba(140, 180, 220, 0.55));
    box-shadow: inset 0  1px 0 rgba(70, 110, 170, 0.65),
                inset 0 -1px 0 rgba(70, 110, 170, 0.65);
    color: rgb(20, 30, 80);
    font-weight: 700;
}

/* Score column (ScoreList L=2760 T=1920 W=855 H=6900 → 184,128, 57,460) */
.score-col {
    left: 184px; top: 128px; width: 57px; height: 456px;
    overflow-y: hidden;            /* driven by .unit-scroll */
    padding: 5px 5px;
    direction: rtl;
    scrollbar-width: none;
    /* Same top/bottom fade as .unit-scroll so the score numbers
       and unit names disappear/appear together at the edges. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 4px,
        #000 calc(100% - 4px),
        transparent 100%);
            mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 4px,
        #000 calc(100% - 4px),
        transparent 100%);
}
.score-col::-webkit-scrollbar { display: none; }

/* CmdGameMenu (the "התחל!" entry button). Original paints start.bmp as-is;
   sky-blue corners pre-blend with the back.png sky. AniStart_Timer runs
   only between MouseOn/MouseOff per UnitListForm.frm — translated here as
   a hover-scoped CSS animation. */
.game-menu-btn {
    /* CmdGameMenu L=9960 T=4590 W=1680 H=1530 → 664, 306, 112, 102 */
    left: 664px; top: 306px; width: 112px; height: 102px;
    background-image: url("../assets/Hemed/pictures/UnitList/start.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: transparent;
}
.game-menu-btn:hover {
    background-image: url("../assets/Hemed/pictures/UnitList/startdown.png");
    animation: gameMenuJiggle 0.45s ease-in-out infinite;
}
.game-menu-btn:active { background-image: url("../assets/Hemed/pictures/UnitList/startdown.png"); }
@keyframes gameMenuJiggle {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(2px, -1px); }
    50%      { transform: translate(0, 1px); }
    75%      { transform: translate(-2px, 0); }
}

/* --- Game menu (hanging wooden signs) -------------------------------
   Original GameMenu.frm: 9 CmdPlus1 slots positioned in a vertical stack,
   each painted with kora<i>.bmp (the sign + Hebrew label baked in). The
   .frm sets only Top and the BMP is the visual. */
.game-sign {
    height: 54px;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    padding: 0;
    cursor: pointer;
    color: transparent;            /* label is baked into the BMP */
}
/* setBack_Timer slides the hovered sign Left -= 4/tick until Left < xStart-10. */
.game-sign { transition: transform 0.2s ease-out; }
.game-sign:hover,
.game-sign.kb-sel { filter: brightness(1.1); transform: translateX(-10px); }
.game-sign.k0 { background-image: url("../assets/Hemed/pictures/GameMenu/kora0.png"); }
.game-sign.k1 { background-image: url("../assets/Hemed/pictures/GameMenu/kora1.png"); }
.game-sign.k2 { background-image: url("../assets/Hemed/pictures/GameMenu/kora2.png"); }
.game-sign.k3 { background-image: url("../assets/Hemed/pictures/GameMenu/kora3.png"); }
.game-sign.k4 { background-image: url("../assets/Hemed/pictures/GameMenu/kora4.png"); }
.game-sign.k5 { background-image: url("../assets/Hemed/pictures/GameMenu/kora5.png"); }
.game-sign.k6 { background-image: url("../assets/Hemed/pictures/GameMenu/kora6.png"); }
.game-sign.k7 { background-image: url("../assets/Hemed/pictures/GameMenu/kora7.png"); }
.game-sign.k8 { background-image: url("../assets/Hemed/pictures/GameMenu/kora8.png"); }
/* Score painted directly on each kora sign — per drawScore() sub:
   DrawString StringToByte(Tag), hdc, 36, 10, RGB(200, 250, 160), vbCenter
   at FontSize 22. The "36, 10" is centered around the sign's left edge. */
.game-sign-score {
    position: absolute;
    left: 6px; top: 13px;
    width: 56px;
    color: rgb(200, 250, 160);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    pointer-events: none;
}

/* Title bar — Form_Paint draws this at y=8 in RGB(90,131,252) over a
   pale-lavender RGB(220,221,252) shadow row at y=9, centered x=400. */
.game-menu-title {
    left: 0; top: 9px; width: 800px;
    text-align: center;
    color: rgb(90, 131, 252);
    /* Orig Form_Paint:598-599 paints twice: shadow row at y=8 in
       RGB(220,221,252), main row at y=9 in RGB(90,131,252). Pure
       vertical 1 px drop — no 4-direction halo. */
    text-shadow: 0 -1px 0 rgb(220, 221, 252);
    font-size: 1.5rem;
    font-weight: 700;
    direction: rtl;
    pointer-events: none;
}

/* windowPic preview — L=285 T=2865 W=3075 H=2700 → 19,191,205,180.
   Hidden until a sign is hovered (CmdPlus1_MouseOn). Per orig
   windowPic.Visible is set True on MouseOn and stays True (no MouseOff
   restore), so once hovered the preview is sticky for the session.
   Click launches the hovered game (windowPic_Click:710-712). */
.game-menu-preview {
    left: 19px; top: 191px; width: 205px; height: 180px;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.18s;
    border: none;
    padding: 0;
    cursor: pointer;
}
.game-menu-preview.visible { opacity: 1; }

/* Total-score readout — orig Form_Paint:614-625 paints
   `Int(sum/n)` at (75, 118) in RGB(200,250,160), visible only when at
   least one slot has a score. */
.game-menu-total {
    left: 50px; top: 110px; width: 50px;
    text-align: center;
    color: rgb(200, 250, 160);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    font-size: 1.4rem;
    font-weight: 700;
    pointer-events: none;
}

/* CleanScore button — orig at L=0 T=432 W=55 H=55. Uses delscore.jpg
   (no MovePic; the .frm doesn't define a hover variant). JS sets
   background-image inline via the active app's picPath. */
.game-menu-clean {
    left: 0; top: 432px; width: 55px; height: 55px;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 0; padding: 0;
    cursor: pointer;
}
.game-menu-clean:active { filter: brightness(0.92); }

/* CmdDaf — orig at L=168 T=452 W=55 H=55. Picture=dafu.jpg (idle),
   MovePic=dafd.jpg (hover/pressed). JS sets --idle and --hover custom
   properties; CSS swaps them on hover. */
.game-menu-daf {
    left: 168px; top: 452px; width: 55px; height: 55px;
    background-color: transparent;
    background-image: var(--idle);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 0; padding: 0;
    cursor: pointer;
}
.game-menu-daf:hover  { background-image: var(--hover); }
.game-menu-daf:active { filter: brightness(0.92); }

/* MsgForm.frm port — styled in-game yes/no popup. Backdrop covers the
   whole viewport (modal); centered 320×190 form mirrors the original
   ScaleWidth/Height. JS sets background-image inline from picPath. */
.msg-form-backdrop {
    position: fixed; inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center;
}
.msg-form {
    position: relative;
    width: 320px; height: 190px;
    background-color: #E0E0E0;     /* matches Form.BackColor &H00E0E0E0& */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    direction: rtl;
    color: rgb(40, 0, 0);
}
.msg-form-text {
    position: absolute;
    left: 8px; right: 8px; top: 16px;
    text-align: center;
    font: 700 24px "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    line-height: 1.15;
    word-wrap: break-word;
    white-space: pre-line;         /* preserve "\n" from the caller */
}
.msg-form-btn {
    position: absolute;
    top: 104px; width: 90px; height: 65px;       /* CmdMsg(*).Top=1560 = 104 px; size 1350×975 ÷ 15 */
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 0; padding: 0;
    cursor: pointer;
}
.msg-form-btn:hover  { filter: brightness(1.05); }
.msg-form-btn:active { filter: brightness(0.92); }
/* CmdMsg(index).Left in twips → /15 = px:
     0 → 3240/15 = 216    (yes in YesNoCancel)
     1 → 1680/15 = 112    (no  in YesNoCancel)
     2 →  120/15 =   8    (cancel in YesNoCancel)
     4 → 2640/15 = 176    (yes / ok in YesNo / OkCancel)
     5 →  600/15 =  40    (no  / cancel in YesNo / OkCancel)
     ok-only — MsgOK moves CmdMsg(0) to Left=120/15 = 8. */
.msg-form-slot-0       { left: 216px; }
.msg-form-slot-1       { left: 112px; }
.msg-form-slot-2       { left:   8px; }
.msg-form-slot-4       { left: 176px; }
.msg-form-slot-5       { left:  40px; }
.msg-form-slot-ok-only { left:   8px; }

/* MainForm running-goat strip (Hemed only). Container holds two
   absolute-positioned <div>s, each with stacked <img> frames at
   opacity:0; JS toggles the active frame's opacity per tick. */
.main-goat {
    pointer-events: none;
    z-index: 2;
}
.main-goat-frame {
    position: absolute;
    left: 0; top: 0;
    width: 130px; height: 136px;
    opacity: 0;
    user-select: none;
    pointer-events: none;
}

/* GoatArow — 2-frame goat sprite at x=712, drawn 90×70 per the BitBlt
   call in setBack_Timer. Slides vertically to GoatY = avg(GoatY, target).
   FrameN toggles 0↔1 while moving (arrow1.png / arrow2.png); single
   frame (arrow1) when settled. */
.goat {
    left: 712px; width: 90px; height: 70px;
    background-image: url("../assets/Hemed/pictures/GameMenu/arrow1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: top 0.3s ease-out;
    pointer-events: none;
}
.goat.moving { animation: goatStep 0.18s steps(1) infinite; }
@keyframes goatStep {
    0%   { background-image: url("../assets/Hemed/pictures/GameMenu/arrow1.png"); }
    50%  { background-image: url("../assets/Hemed/pictures/GameMenu/arrow2.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameMenu/arrow1.png"); }
}

/* ShakePic — grass tufts at L=6735 T=7980 → x=449 y=532. AutoSize=True
   in the .frm so we use the BMP's natural size. setBack_Timer cycles
   shake0..shake3 every ~150ms (CInt(shakePicIndex/3.5)) while moving. */
.shake-pic {
    left: 449px; top: 532px; width: 177px; height: 48px;
    background-image: url("../assets/Hemed/pictures/GameMenu/shake0.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}
.shake-pic.shaking { animation: grassShake 0.6s steps(1) infinite; }
@keyframes grassShake {
    0%   { background-image: url("../assets/Hemed/pictures/GameMenu/shake0.png"); }
    25%  { background-image: url("../assets/Hemed/pictures/GameMenu/shake1.png"); }
    50%  { background-image: url("../assets/Hemed/pictures/GameMenu/shake2.png"); }
    75%  { background-image: url("../assets/Hemed/pictures/GameMenu/shake3.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameMenu/shake0.png"); }
}

/* --- Match / Hatama (GameHatama.frm) -----------------------------
   Pixel-faithful port of RePaintLine() composition:
     Each row is 660px wide at left=60, height=42, y=110+i*42.
     linesfull.png (660×430) sliced into 10 rows of 43px via LinePicOrder.
     linesleft.png / linesright.png (40×430) are the ragged inner edges.
   Three visible states per row:
     NotAnswered: only right paper (X=317→660) + RightLinePic ragged edge at X=317.
     InFocus:     both papers slightly offset (CurrX=3) with both edges meeting.
     Answered:    both papers overlap (CurrX=-6) into one strip, tinted green. */
.hat-lines-layer,
.hat-flowers-layer { left: 0; top: 0; width: 800px; height: 600px; }
.hat-flowers-layer { pointer-events: none; }

.hat-line {
    left: 60px; width: 660px; height: 42px;
}
/* Each row uses linesfull.png as its FULL background, sliced to the row's
   pic-N strip (rows 0..9 of the 660×430 sprite sheet, 43px each). For the
   NotAnswered state we clip-path to show only the right half; on InFocus
   /Answered the clip expands to reveal the whole strip. Much simpler than
   composing two paper halves + edge sprites. */
/* Each row composes four layers exactly as the original RePaintLine paints
   into TBackPic — one PaintMaskedPicture call per layer:
       (dest_x, dest_y, dest_w, dest_h, src_x, src_y)
   Translation to CSS: `left = dest_x`, `width = dest_w`,
                       `background-position = (-src_x, -src_y)`.

   Layer  | source sprite        | src_x  | dest_w (constant)
   ----------------------------------------------------------------
   paper-right | linesfull.png   | split+27 | 660 − (split+27)
   edge-right  | linesright.png  | 0        | 40
   paper-left  | linesfull.png   | 0        | split − 20
   edge-left   | linesleft.png   | 0        | 40

   `dest_x` (the `left`) varies per state via CurrX — see rules below.
   --split-x is set per-row by JS from unit.Middle / 100 × 660. */
.hat-paper, .hat-edge {
    position: absolute; top: 0; height: 42px;
    background-repeat: no-repeat;
    transition: left 0.25s ease-out, filter 0.3s;
}
.hat-paper-right {
    width: calc(660px - var(--split-x, 330px) - 27px);
    background-image: url("../assets/Hemed/pictures/GameHatama/linesfull.png");
    background-size: 660px 430px;
    background-position-x: calc(-1 * (var(--split-x, 330px) + 27px));
}
.hat-edge-right {
    width: 40px;
    background-image: url("../assets/Hemed/pictures/GameHatama/linesright.png");
    background-size: 40px 430px;
    background-position-x: 0;
}
.hat-paper-left {
    width: calc(var(--split-x, 330px) - 20px);
    background-image: url("../assets/Hemed/pictures/GameHatama/linesfull.png");
    background-size: 660px 430px;
    background-position-x: 0;
}
.hat-edge-left {
    width: 40px;
    background-image: url("../assets/Hemed/pictures/GameHatama/linesleft.png");
    background-size: 40px 430px;
    background-position-x: 0;
}

/* Per-app asset paths (Nivim ships its own painted sprite-sheets at the
   same dimensions). */
.hat-lines-layer[data-app="Nivim"] .hat-paper-right,
.hat-lines-layer[data-app="Nivim"] .hat-paper-left {
    background-image: url("../assets/Nivim/pictures/GameHatama/linesfull.png");
}
.hat-lines-layer[data-app="Nivim"] .hat-edge-right { background-image: url("../assets/Nivim/pictures/GameHatama/linesright.png"); }
.hat-lines-layer[data-app="Nivim"] .hat-edge-left  { background-image: url("../assets/Nivim/pictures/GameHatama/linesleft.png"); }

/* pic-N slices: row N of the 10-row sprite-sheet at y = -N*43px. Applied
   uniformly to BOTH paper and edge layers — RePaintLine slices them all
   from the same `LinePicOrder * 42.8` source-Y. */
.pic-0 .hat-paper, .pic-0 .hat-edge { background-position-y:   0px; }
.pic-1 .hat-paper, .pic-1 .hat-edge { background-position-y: -43px; }
.pic-2 .hat-paper, .pic-2 .hat-edge { background-position-y: -86px; }
.pic-3 .hat-paper, .pic-3 .hat-edge { background-position-y: -129px; }
.pic-4 .hat-paper, .pic-4 .hat-edge { background-position-y: -172px; }
.pic-5 .hat-paper, .pic-5 .hat-edge { background-position-y: -215px; }
.pic-6 .hat-paper, .pic-6 .hat-edge { background-position-y: -258px; }
.pic-7 .hat-paper, .pic-7 .hat-edge { background-position-y: -301px; }
.pic-8 .hat-paper, .pic-8 .hat-edge { background-position-y: -344px; }
.pic-9 .hat-paper, .pic-9 .hat-edge { background-position-y: -387px; }

/* Text — ask is on RIGHT (after the split at --split-x), answer is on LEFT.
   Positions anchor to the unit's `--split-x` (= Middle% of 660px) so units
   with Middle≠50 align correctly. */
.hat-text {
    position: absolute; top: 0; height: 42px;
    display: flex; align-items: center;
    color: #2a1d0a; font-size: 0.95rem; font-weight: 700;
    white-space: nowrap; overflow: hidden;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    direction: rtl;
}
.hat-text-right {
    left: var(--split-x, 330px); right: 14px;
    justify-content: center;
    padding: 0 8px;
}
.hat-text-left {
    left: 14px; width: calc(var(--split-x, 330px) - 14px);
    justify-content: center;
    padding: 0 8px;
}

/* Per-state `dest_x` (= CSS `left`) for each of the four layers,
   transcribed directly from RePaintLine. No clip-path; no width swap.
   The dest_w is constant per layer, only the screen position changes.

   NotAnswered (GameHatama.frm:406-410):
     FullLinePic.PaintMaskedPicture ..., split+27,       0, ...
     RightLinePic.PaintMaskedPicture ...,  split-13,      0, ...
     (paper-left + edge-left hidden) */
.hat-line.not-answered .hat-paper-right { left: calc(var(--split-x, 330px) + 27px); }
.hat-line.not-answered .hat-edge-right  { left: calc(var(--split-x, 330px) - 13px); }
.hat-line.not-answered .hat-paper-left,
.hat-line.not-answered .hat-edge-left,
.hat-line.not-answered .hat-text-left   { display: none; }
.hat-line.not-answered                  { cursor: pointer; }
.hat-line.not-answered:hover .hat-paper-right,
.hat-line.not-answered:hover .hat-edge-right { filter: brightness(1.05); }

/* InFocus (GameHatama.frm:418-421, hardcoded +3/-3 inward shift):
     FullLinePic.PaintMaskedPicture ..., 3,                     0, ...
     LeftLinePic.PaintMaskedPicture ...,  3 + split - 20,        0, ...
     FullLinePic.PaintMaskedPicture ..., split + 27 - 3,        0, ...
     RightLinePic.PaintMaskedPicture..., split - 13 - 3,        0, ...
   Plus ChangeRgb(0,10,40) → very light blue/green tint. */
.hat-line.in-focus .hat-paper-left  { left: 3px; }
.hat-line.in-focus .hat-edge-left   { left: calc(var(--split-x, 330px) - 17px); }
.hat-line.in-focus .hat-paper-right { left: calc(var(--split-x, 330px) + 24px); }
.hat-line.in-focus .hat-edge-right  { left: calc(var(--split-x, 330px) - 16px); }
.hat-line.in-focus .hat-paper-right,
.hat-line.in-focus .hat-paper-left,
.hat-line.in-focus .hat-edge-right,
.hat-line.in-focus .hat-edge-left   { filter: hue-rotate(10deg) brightness(1.03); }

/* Answered (GameHatama.frm:446-451 with CurrX = −6 → papers overlap):
     FullLinePic.PaintMaskedPicture ..., -CurrX = 6,                       0, ...
     LeftLinePic.PaintMaskedPicture ...,  -CurrX + split - 20 = split-14, 0, ...
     FullLinePic.PaintMaskedPicture ..., split + 27 + CurrX = split+21,  0, ...
     RightLinePic.PaintMaskedPicture..., split - 13 + CurrX = split-19,   0, ...
   Plus ChangeRgb(-15,30,-10) → green tint (ErrorCount = 0). */
.hat-line.answered .hat-paper-left  { left: 6px; }
.hat-line.answered .hat-edge-left   { left: calc(var(--split-x, 330px) - 14px); }
.hat-line.answered .hat-paper-right { left: calc(var(--split-x, 330px) + 21px); }
.hat-line.answered .hat-edge-right  { left: calc(var(--split-x, 330px) - 19px); }
.hat-line.answered .hat-paper-left,
.hat-line.answered .hat-paper-right,
.hat-line.answered .hat-edge-left,
.hat-line.answered .hat-edge-right  { filter: hue-rotate(60deg) saturate(0.85) brightness(0.95); }
.hat-line.answered                  { cursor: default; }

.hat-line.wrong-flash .hat-paper-right {
    animation: hatWrongFlash 0.5s steps(1) 2;
}
@keyframes hatWrongFlash {
    0%, 50%, 100% { filter: none; }
    25%, 75%      { filter: hue-rotate(-40deg) brightness(0.85); }
}
/* 3rd-error flash — original TimerError_Timer toggles RGB ±15/10/10 over
   8 cycles (~100ms each). Same effect, applied to the whole row. */
.hat-line.triple-error-flash {
    animation: hatTripleErrorFlash 0.1s steps(1) 8;
}
@keyframes hatTripleErrorFlash {
    0%, 100% { filter: brightness(0.85) hue-rotate(-15deg); }
    50%      { filter: none; }
}

/* Header — UnitName · UserName, light-blue text at top of stage.
   Triple-shadow per orig Form_Paint:DrawString TempStr at (400, 8/10/9)
   in RGB(180,220,255) + RGB(130,180,255) + RGB(20,40,190). */
.hat-header {
    left: 60px; top: 8px; width: 680px;
    text-align: center; font: 700 18pt "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    color: rgb(20, 40, 190);
    text-shadow:
        0  2px 0 rgb(180, 220, 255),
        0 -2px 0 rgb(130, 180, 255);
    pointer-events: none;
}

/* Help overlay — same pattern as apple-tip. */
.hat-tip {
    left: 80px; top: 60px; width: 640px; min-height: 30px;
    text-align: center;
    color: rgb(40, 80, 190);
    font: 700 14pt "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    padding: 5px 10px;
    pointer-events: none;
    z-index: 4;
    direction: rtl;
    display: none;
}

/* CmdRePlay — same icon set as apple-replay. */
.hat-replay {
    left: 64px; top: 5px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/replay_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    z-index: 50;
}
.hat-replay:hover {
    background-image: url("../assets/Hemed/pictures/replay_on.png");
}

/* Penalty number at (740,350) in red. */
.hat-penalty {
    left: 740px; top: 350px; width: 60px; height: 40px;
    text-align: center;
    font-size: 1.7rem; font-weight: 700;
    color: rgb(190, 80, 20);
    text-shadow:
        0 1px 1px rgb(255, 220, 180),
        0 -1px 0 rgb(255, 180, 130);
    pointer-events: none;
}

/* Hint text below the header (y=60), painted when error count ≥ ErrorForHint. */
.hat-hint {
    left: 60px; top: 60px; width: 680px;
    text-align: center; font-size: 0.95rem; font-style: italic;
    color: rgb(30, 50, 210); min-height: 20px;
    pointer-events: none;
}
/* Goat at GoatPic L=10725 T=1620 → (715,108), 85×173 native. */
/* Hatama goat container — holds stacked <img> frames built by match.js
   (goatlook0..8, goatgood_1_0..8, goatwin0..24). JS toggles opacity to
   switch poses; no CSS bg-image swap = no transparent flash. */
.hat-goat {
    left: 715px; top: 108px; width: 85px; height: 173px;
    background-color: transparent;
    z-index: 5;
    pointer-events: none;
}

/* Flowers on the left stem — Y = 485 - 390/QCount*i; X from FloweX.txt. */
.hat-flower {
    position: absolute; width: 50px; height: 50px;
    background-image: url("../assets/Hemed/pictures/GameHatama/flower0_0.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    z-index: 4;
}
.hat-flower.kind-0.growing { animation: hatFlower0 0.75s steps(1) forwards; }
.hat-flower.kind-1.growing { animation: hatFlower1 0.75s steps(1) forwards; }
.hat-flower.kind-2.growing { animation: hatFlower2 0.55s steps(1) forwards; }
@keyframes hatFlower0 {
    0%  { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_0.png"); }
    11% { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_1.png"); }
    22% { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_2.png"); }
    33% { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_3.png"); }
    44% { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_4.png"); }
    55% { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_5.png"); }
    66% { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_6.png"); }
    77% { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_7.png"); }
    88% { background-image: url("../assets/Hemed/pictures/GameHatama/flower0_8.png"); }
    100%{ background-image: url("../assets/Hemed/pictures/GameHatama/flower0_9.png"); }
}
@keyframes hatFlower1 {
    0%  { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_0.png"); }
    11% { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_1.png"); }
    22% { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_2.png"); }
    33% { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_3.png"); }
    44% { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_4.png"); }
    55% { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_5.png"); }
    66% { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_6.png"); }
    77% { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_7.png"); }
    88% { background-image: url("../assets/Hemed/pictures/GameHatama/flower1_8.png"); }
    100%{ background-image: url("../assets/Hemed/pictures/GameHatama/flower1_9.png"); }
}
@keyframes hatFlower2 {
    0%  { background-image: url("../assets/Hemed/pictures/GameHatama/flower2_0.png"); }
    14% { background-image: url("../assets/Hemed/pictures/GameHatama/flower2_1.png"); }
    28% { background-image: url("../assets/Hemed/pictures/GameHatama/flower2_2.png"); }
    42% { background-image: url("../assets/Hemed/pictures/GameHatama/flower2_3.png"); }
    57% { background-image: url("../assets/Hemed/pictures/GameHatama/flower2_4.png"); }
    71% { background-image: url("../assets/Hemed/pictures/GameHatama/flower2_5.png"); }
    100%{ background-image: url("../assets/Hemed/pictures/GameHatama/flower2_6.png"); }
}
.hat-flower.seed {
    background-image: url("../assets/Hemed/pictures/GameHatama/flower0_0.png");
    opacity: 0.7;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}


/* --- American (GameAmerican.frm) -----------------------------------
   QSpot   L=150 T=80  W=500 H=60 — uses text.bmp frame.
   HotSpot L=170 W=500 H=60       — 4 stacked, Top=160+i*62.
   Hetz    X=80, Y=mid-45         — green arrow indicator left of option.
   Sound   L = QSpot.Right+10     — speaker button.
   Header  (400,10) RGB(20,40,200) light-blue shadow.
   Penalty (2,487) RGB(190,80,20) orange shadow.
   Flowers snaking 3 rows at y=462/487/512, 65px apart. */
.am-flower-layer { left: 0; top: 0; width: 800px; height: 600px;
                   pointer-events: none; }
.am-options-layer { left: 0; top: 0; width: 800px; height: 600px; }

.am-header {
    /* Orig Form_Paint:781-783 — DrawString TempStr at (400, 10), (400, 13),
       (400, 12) in RGB(160,190,245) / RGB(110,110,225) / RGB(20,40,200).
       Reproduce the 3-layer offset shadow effect via two text-shadow
       offsets matching the orig +2/-2 px Y separation. */
    left: 0; right: 0; top: 10px;
    text-align: center; font-size: 22pt; font-weight: 700;
    font-family: "David CLM", "Arial Hebrew", "Heebo", "Segoe UI", Arial, sans-serif;
    color: rgb(20, 40, 200);
    text-shadow:
        0 2px 0 rgb(160, 190, 245),
        0 -2px 0 rgb(110, 110, 225);
    pointer-events: none;
}
/* Calibration.Instructions banner — Form_Paint at (400, 40) in
   RGB(40,80,190). Centered between header and Q frame. */
.am-help {
    left: 0; right: 0; top: 34px;
    text-align: center; font-size: 0.95rem; font-weight: 600;
    color: rgb(40, 80, 190);
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    pointer-events: none;
}

.am-penalty {
    /* Orig ShowPenalty:1036-1046 — 3-layer DrawString at (25, 487/488/489)
       in RGB(255,220,180) cream / RGB(255,180,130) tan / RGB(190,80,20)
       dark-orange. The clear-rect is (2, 487, 50, 25) so position the
       text-cell at left=2, top=487, width=50, height=25, centered. */
    left: 2px; top: 487px; width: 50px; height: 25px;
    text-align: center;
    font: 700 22pt "David CLM", "Arial Hebrew", "Heebo", "Segoe UI", Arial, sans-serif;
    color: rgb(190, 80, 20);
    text-shadow:
        0  1px 0 rgb(255, 220, 180),
        0 -1px 0 rgb(255, 180, 130);
    pointer-events: none;
    line-height: 25px;
}

/* American goat — 130×136. JS-driven via HND.createGoat (js/goat.js)
   which sets left/top/background-image inline every tick. Orig
   GameAmerican.frm Form_Load:376-378 starts the goat off-screen at
   (900, 407) — the bottom-row equivalent of Haklada's GoatY=55 setup
   (flower row at 462 → goat 55px above). */
.am-goat {
    width: 130px; height: 136px;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    z-index: 3;
    pointer-events: none;
}

.am-flower {
    position: absolute; width: 38px; height: 60px;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
}
.am-flower.seed {
    background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_0.png");
    opacity: 0.5;
}
/* End-frame depends on the error bucket per GameAmerican.frm:993-1007:
     bucket 0 (0 errors)  → FlowerFrameTo = 9 → grown-full (frames 0..9)
     bucket 1 (1 error)   → FlowerFrameTo = 5 → grown-half (frames 0..5)
     bucket 2 (2+ errors) → FlowerFrameTo = 3 + kind→3 → grown-dead
                            (flower4_* sprites, frames 0..3) */
.am-flower.kind-0.grown-full { animation: hakFlower1     0.75s steps(1) forwards; }
.am-flower.kind-1.grown-full { animation: hakFlower2     0.75s steps(1) forwards; }
.am-flower.kind-2.grown-full { animation: hakFlower3     0.75s steps(1) forwards; }
.am-flower.kind-0.grown-half { animation: hakFlower1Half 0.45s steps(1) forwards; }
.am-flower.kind-1.grown-half { animation: hakFlower2Half 0.45s steps(1) forwards; }
.am-flower.kind-2.grown-half { animation: hakFlower3Half 0.45s steps(1) forwards; }
.am-flower.kind-3.grown-dead { animation: hakFlowerDead  0.35s steps(1) forwards; }

/* Half-grown (frames 0..5) — same source as full but stops at frame 5. */
@keyframes hakFlower1Half {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_0.png"); opacity: 0.5; }
    20%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_1.png"); opacity: 1; }
    40%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_2.png"); }
    60%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_3.png"); }
    80%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_4.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_5.png"); }
}
@keyframes hakFlower2Half {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_0.png"); opacity: 0.5; }
    20%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_1.png"); opacity: 1; }
    40%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_2.png"); }
    60%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_3.png"); }
    80%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_4.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_5.png"); }
}
@keyframes hakFlower3Half {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_0.png"); opacity: 0.5; }
    20%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_1.png"); opacity: 1; }
    40%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_2.png"); }
    60%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_3.png"); }
    80%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_4.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_5.png"); }
}

/* Withered (FlowerKind = 3) — flower4_0..3, frames 0..3 only. */
.am-flower.kind-3 {
    background-image: url("../assets/Hemed/pictures/GameHaklada/flower4_0.png");
}
@keyframes hakFlowerDead {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower4_0.png"); opacity: 0.6; }
    33%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower4_1.png"); opacity: 1; }
    66%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower4_2.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower4_3.png"); }
}
/* ============ American layout system (3 distinct grids, orig
   getHotSpot:191-271). Layout class on the game-root: am-layout-text,
   am-layout-text-pic, am-layout-pic-text. Each option/Q frame uses
   --opt-i CSS var (0..3) to position itself in the grid. ============ */

/* ---- Q frame (text mode default — orig:228-234) ---- */
.am-q-frame {
    /* Layout-text: QSpot.Left=150, Top=80, W=500, H=60 */
    left: 150px; top: 80px; width: 500px; height: 60px;
    background-image: url("../assets/Hemed/pictures/GameAmerican/text.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0 30px;
}
.am-q-frame:hover {
    background-image: url("../assets/Hemed/pictures/GameAmerican/textfocus.png");
}
/* Layout pic-text: Q is a small picture box (165×177) top-left
   (orig:203-206 QSpot.Top=180, Left=5). */
.am-layout-pic-text .am-q-frame {
    left: 5px; top: 180px; width: 165px; height: 177px;
    background-image: url("../assets/Hemed/pictures/GameAmerican/frame.png");
    padding: 18px;
}
.am-layout-pic-text .am-q-frame:hover {
    background-image: url("../assets/Hemed/pictures/GameAmerican/framefocus.png");
}
.am-q-text { color: #2a1d0a; font-size: 1.3rem; font-weight: 700; text-align: center; flex: 1; }
.am-q-text.am-pic-loaded { font-size: 0; }    /* hide text when picture loads */

/* ---- Option box (default = text-text vertical rows, orig:220-227) ---- */
.am-option {
    /* Layout-text: 160 + i*62 for top, left=170, w=500, h=60 */
    left: 170px;
    top: calc(160px + var(--opt-i, 0) * 62px);
    width: 500px; height: 60px;
    background-image: url("../assets/Hemed/pictures/GameAmerican/text.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0 30px;
    transition: filter 0.15s;
}
.am-option:hover,
.am-option.focus {
    background-image: url("../assets/Hemed/pictures/GameAmerican/textfocus.png");
}
/* Layout pic-text: options indented to make room for Q picture
   (orig:194-198 — Top = 148 + i*62, Left = 285). */
.am-layout-pic-text .am-option {
    left: 285px;
    top: calc(148px + var(--opt-i, 0) * 62px);
}
/* Layout text-pic: option cards in a 4-across row (orig:248-254 —
   Top=230, Left = 50 + i*180, W=165, H=177). */
.am-layout-text-pic .am-option {
    top: 230px;
    left: calc(50px + var(--opt-i, 0) * 180px);
    width: 165px; height: 177px;
    background-image: url("../assets/Hemed/pictures/GameAmerican/frame.png");
    padding: 18px;
    flex-direction: column;
}
.am-layout-text-pic .am-option:hover,
.am-layout-text-pic .am-option.focus {
    background-image: url("../assets/Hemed/pictures/GameAmerican/framefocus.png");
}
.am-option-pic .am-option-text {
    background-size: 100% 100%; background-repeat: no-repeat;
    flex: 1; width: 100%;
    color: transparent;     /* hide fallback text once picture loads */
}
.am-option-pic .am-option-text:not(.am-pic-loaded) {
    color: #2a1d0a;         /* show text fallback when no picture */
    background: none;
}
.am-option.done {
    background-image: url("../assets/Hemed/pictures/GameAmerican/textfocus.png");
    filter: hue-rotate(60deg) brightness(1.05);
}
.am-option.wrong { animation: shake 0.4s; filter: hue-rotate(-40deg) brightness(0.95); }
.am-option.reveal { animation: amRevealFlash 0.6s; }
@keyframes amRevealFlash {
    0%, 100% { filter: none; }
    25%, 75% { filter: hue-rotate(30deg) brightness(1.2); }
}
.am-option-text { color: #2a1d0a; font-size: 1.15rem; font-weight: 600; text-align: center; }

/* ---- Hetz arrow per layout. Default text-text: pointing right
   (orig:200-201 HetzhSpots.X=Left-90=80, Y=row-mid-45). ---- */
.am-hetz {
    left: 80px;
    top: calc(160px + var(--opt-i, 0) * 62px + 5px);
    width: 70px; height: 50px;
    background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright0_1.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.18s, top 0.15s, left 0.15s;
    pointer-events: none;
}
/* Layout pic-text: arrow shifted right to align with indented options. */
.am-layout-pic-text .am-hetz {
    left: 195px;
    top: calc(148px + var(--opt-i, 0) * 62px + 5px);
}
/* Layout text-pic: arrow points DOWN (orig:266 — HetzDown<i>_)
   and sits ABOVE each picture card (orig:252-253 — X=card-mid-45,
   Y=card-top-90 = 140). */
.am-layout-text-pic .am-hetz {
    width: 50px; height: 70px;
    top: 140px;
    left: calc(50px + var(--opt-i, 0) * 180px + 60px);
}
/* If HetzDown sprites aren't shipped we fall back by rotating the
   right-arrow sprite 90° clockwise. Visual approximation. */
.am-hetz.am-hetz-down {
    transform: rotate(90deg);
}
/* HetzhStatus per .frm (lines 211-216, 617-619, 695-697):
     0 = idle           → static HetzRight0_1.png
     1 = correct flash  → 5-frame HetzRight1_*.png cycle
     2 = wrong   flash  → 8-frame HetzRight2_*.png cycle
   The original animates only on correct/wrong transitions; idle is static. */
.am-hetz.on   {
    opacity: 1;
    /* idle indicator on hover/focus — single static frame, no cycle */
    background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright0_1.png");
}
.am-hetz.correct {
    opacity: 1;
    animation: amHetzCorrect 0.5s steps(1);
}
@keyframes amHetzCorrect {
    0%   { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright1_1.png"); }
    20%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright1_2.png"); }
    40%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright1_3.png"); }
    60%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright1_4.png"); }
    80%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright1_5.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright1_5.png"); }
}
.am-hetz.wrong {
    opacity: 1;
    animation: amHetzWrong 0.8s steps(1);
}
@keyframes amHetzWrong {
    0%   { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright2_1.png"); }
    12%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright2_2.png"); }
    25%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright2_3.png"); }
    37%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright2_4.png"); }
    50%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright2_5.png"); }
    62%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright2_6.png"); }
    75%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright2_7.png"); }
    87%  { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright2_8.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright0_1.png"); }
}
/* Keep .done class working — final state shows the last "correct" frame */
.am-hetz.done {
    opacity: 1;
    background-image: url("../assets/Hemed/pictures/GameAmerican/hetzright1_5.png");
}

.am-sound {
    /* Layout-text default: orig CmdSound.Left = QSpot.Right+10 = 660,
       Top = QSpot.Top+2 = 82. */
    left: 660px; top: 82px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/GameAmerican/sound.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
}
/* Layout pic-text: CmdSound moves below the small Q picture box
   (orig:208-209 — Left = QSpot.Left+50 = 55, Top = QSpot.Bottom = 357). */
.am-layout-pic-text .am-sound {
    left: 55px; top: 357px;
}
.am-sound:hover { background-image: url("../assets/Hemed/pictures/GameAmerican/sound_on.png"); }

/* CmdRePlay mid-game button — orig GameAmerican.frm:90-102 button
   at L=960, T=75 (twips → 64, 5 px), 55×55. Hidden until first Exit
   click reveals it (orig CmdExit_Click:392-395). Uses the shared
   replay_on/replay_off sprites at assets/<App>/pictures/. */
.am-replay {
    left: 64px; top: 5px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/replay_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    z-index: 50;
}
.am-replay:hover {
    background-image: url("../assets/Hemed/pictures/replay_on.png");
}


/* --- Apple (GameApple.frm) --------------------------------------
   Tree spans the canopy (back.png). Q_Corner.Y = A_Corner.Y = 540
   with MiddlePic divider between them. Goat at (629, 335).
   Header at y=5-9 in RGB(50,100,210) light-blue. */
.apple-canopy    { left: 0; top: 0; width: 800px; height: 600px; pointer-events: none; }
.apple-tree-layer{ left: 0; top: 0; width: 800px; height: 600px; pointer-events: none; }
/* Picture-mode chalkboard (orig PlayGame:370 PaintPicture loah at 0,271).
   The "loah" is a 200×130 board behind the per-Q image. */
.apple-loah {
    left: 0; top: 271px; width: 200px; height: 130px;
    background-image: url("../assets/Hemed/pictures/GameApple/loah.png");
    background-size: 200px 130px; background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}
/* Per-Q picture — fixed 150×120 at (17, 302) per StretchBlt branch
   (orig TimerShowPic:1018). The top-down clip-path reveal mimics the
   9-slice BitBlt loop (orig:1016) for small images. */
.apple-qpic {
    left: 17px; top: 302px; width: 150px; height: 120px;
    background-size: 150px 120px; background-repeat: no-repeat;
    pointer-events: none;
    z-index: 4;
    clip-path: inset(0 0 100% 0);
}
.apple-qpic.revealing { animation: apple-qpic-reveal 330ms steps(10) forwards; }
/* Large images (W>=150 OR H>=120) use the StretchBlt path per orig — no
   reveal animation, just an immediate paint. */
.apple-qpic.instant   { clip-path: none; animation: none; }
@keyframes apple-qpic-reveal {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0   0% 0); }
}
/* Foliage occludes the top of the static apples per GameApple.frm:727:
     Foliage.Mask 0, 0, , ApplePos(Id).X - 195, ApplePos(Id).Y - 75, ...
   The Mask call uses src offsets (-195, -75), which means the foliage is
   logically anchored at (195, 75) on the form at its NATIVE 378×245 size
   (background.png), and each apple samples the corresponding patch when
   blitted. As a DOM overlay we render the whole sprite at (195, 75) with
   z-index ABOVE the static apples — same visual effect. */
.apple-foliage {
    left: 195px; top: 75px; width: 378px; height: 245px;
    pointer-events: none;
    /* Lower than goat (z=4) so the goat walks IN FRONT of trees. Higher
       than tree apples (default 1) so foliage occludes the apple tops
       per orig PaintApple's per-apple Foliage.Mask. */
    z-index: 3;
    background-image: url("../assets/Hemed/pictures/GameApple/foliage.png");
    background-size: 378px 245px;     /* native, no stretch */
    background-repeat: no-repeat;
}
.apple-fall-layer { left: 0; top: 0; width: 800px; height: 600px;
                    pointer-events: none; z-index: 8; }

/* Static tree apple — visible by default on each Q at ApplePos[i].
   The original calls PaintApple(i, 1) before any user input.
   Stage 0 = red apples; Stage 1 (after first basket fills) = yellow. */
.apple-static {
    position: absolute;
    width: 50px; height: 37px;
    background-size: 100% 100%; background-repeat: no-repeat;
    pointer-events: none;
}
.apple-static.red    { background-image: url("../assets/Hemed/pictures/GameApple/applered1.png"); }
.apple-static.yellow { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow1.png"); }

/* Basket pile at the bottom — one per completed Q, sprite N = apples in pile. */
.apple-basket-layer { left: 0; top: 0; width: 800px; height: 600px; pointer-events: none; z-index: 5; }
.apple-basket {
    position: absolute;
    width: 85px; height: 89px;
    background-size: 100% 100%; background-repeat: no-repeat;
    pointer-events: none;
}

.apple-header {
    /* Orig Form_Paint:709-713 — DrawString TempStr THREE times at
       (400, 5/9/7) in RGB(180,220,255) [y=5 above] / RGB(150,200,255)
       [y=9 below] / RGB(50,100,210) [y=7 main]. 22pt SystemFont. */
    left: 0; right: 0; top: 7px;
    text-align: center; font: 700 18pt "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    color: rgb(50, 100, 210);
    text-shadow:
        0 -2px 0 rgb(180, 220, 255),
        0  2px 0 rgb(150, 200, 255);
    pointer-events: none;
}

/* Live score number — orig ScoreTimer:780-783 repaints at (390, 120),
   font 40 + Int(score)/2, color RGB(20,20,100), vbCenter (centers AROUND
   x=390, not viewport center=400). Anchor at left:390 with translateX(-50%)
   so the number's center stays at x=390 regardless of font growth. */
.apple-score-live {
    left: 390px; top: 120px; transform: translateX(-50%);
    text-align: center; font-weight: 700;
    color: rgb(20, 20, 100);
    pointer-events: none;
    z-index: 9;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

/* Praise text — orig ScoreTimer:828-830 DrawString AllTips(WhatToDraw)
   THREE times at (390, 254/258/255) in RGB(0,254,0) / RGB(0,0,0) /
   RGB(184,230,80), FontSize=52/FixME, vbCenter (centers AROUND x=390). */
.apple-praise {
    left: 390px; top: 254px; transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    font: 700 32pt "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    color: rgb(184, 230, 80);
    pointer-events: none;
    z-index: 10;
    text-shadow:
        0 -1px 0 rgb(0, 254, 0),
        0  3px 0 rgb(0, 0, 0);
    direction: rtl;
}

/* Help overlay — orig CmdHelp_Click:252-256 DrawString at (400, 30) in
   RGB(40,80,190), FontSize 22pt SystemFont. Shown on game start + F1
   until game4.wav finishes (driven by JS onended callback). */
.apple-tip {
    left: 100px; top: 22px; width: 600px; min-height: 30px;
    text-align: center;
    color: rgb(40, 80, 190);
    font: 700 22pt "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    text-shadow: 0 1px 2px rgba(255,255,255,0.7);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    padding: 5px 10px;
    pointer-events: none;
    z-index: 4;
    direction: rtl;
    display: none;
}

/* CmdRePlay (orig GameApple.frm:90-102 L=960 T=75 ~64×55 px). */
.apple-replay {
    left: 64px; top: 5px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/replay_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    z-index: 50;
}
.apple-replay:hover {
    background-image: url("../assets/Hemed/pictures/replay_on.png");
}

/* Divider (MiddlePic) — orig GameApple.frm:531:
     MiddlePic.MaskB CurrentUnit.Middle * 7.5 + 25, 550
   MaskB positions the TOP-LEFT of the sprite at (X, 550). Native size
   is 8 × 49 from middle.png; no stretch. */
.apple-divider {
    left: var(--apple-div-x, 400px);
    top: 550px; width: 8px; height: 49px;
    background-image: url("../assets/Hemed/pictures/GameApple/middle.png");
    background-size: 8px 49px; background-repeat: no-repeat;
    pointer-events: none;
}

/* Q text anchored vbCenter at Q_Corner.X with width centered around it.
   Q_Corner.X is the user's right-of-divider centroid. */
.apple-q {
    left: calc(var(--apple-q-x, 600px) - 180px);
    width: 360px;
    top: 540px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; color: #2a1d0a;
    direction: rtl;
    pointer-events: none;
}
/* A text — answer area, vbCenter at A_Corner.X. */
.apple-a {
    left: calc(var(--apple-a-x, 200px) - 180px);
    width: 360px;
    top: 540px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #2a1d0a;
    direction: rtl;
    cursor: pointer;
}
.apple-char {
    display: inline-block;
    min-width: 0.5em;
    margin: 0 1px;
    text-align: center;
}
.apple-char.non-letter { color: rgba(80,50,20,0.7); }
.apple-char.filled     { color: #2a1d0a; font-weight: 700; }
.apple-char.qmark {
    /* Static q_mark cursor for unfilled letter positions.
       Original GameApple.frm:1146 — PaintText draws frame 1 (no cycle):
         QMark.MaskBstrech CurrPosX, A_Corner.Y + 10, 1, ...
       with ShrinkFactor = Font.Size/(18*1.3) so the q_mark scales with
       the answer-text font. We use em-relative sizing to match: a
       q_mark sprite is natively 22×30 px at 18 pt font — ratio 22/18em
       and 30/18em, i.e. 1.22em wide × 1.67em tall. */
    width: 1.22em; height: 1.67em; vertical-align: middle;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-image: url("../assets/Hemed/pictures/GameApple/q_mark1.png");
}

/* CmdSound (the speaker button). Orig GameApple.frm:96-108 —
   Left=11040t Top=4185t W=510t H=510t → (736, 279, 34×34). Sits in
   the upper-right area, BETWEEN the foliage and the right edge —
   NOT at the bottom near the Q text. (Port previously had it at
   (732, 540) which placed it at the bottom-right corner — wrong.) */
.apple-sound {
    left: 736px; top: 279px; width: 34px; height: 34px;
    background-image: url("../assets/Hemed/pictures/GameApple/sound.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
}

/* Falling apple — spawned on wrong keypress, lands with the wrong char. */
/* Per AppleFall_Timer (GameApple.frm:167-235):
     Frames 1-8  → PaintApple(i, frame): apple SHAKES on the tree at its
                   original Y, sprite cycles through frames 1..8.
     Frames 9-16 → Y = origY + (440 - origY)/7 * (frame-9): parabolic drop
                   to y=440 (independent of starting slot).
     Frame 17    → landed; wrong char is drawn above.
   We split this into a wobble (0..400ms, sprite cycle, stays put) followed
   by a drop (400..1000ms, translateY by --fall-dy = 440-origY). Each apple
   gets its own --fall-dy because the original Y varies (108..242). */
.apple-fall {
    position: absolute; width: 50px; height: 37px;
    background-size: 100% 100%; background-repeat: no-repeat;
    /* Original AppleFall.Interval = 70 ms (GameApple.frm:28), driving
       16 frames: 8 wobble + 8 drop = ~1.12 s total. We pace the two
       phases to match: 560 ms wobble + 560 ms drop.
       Color is set per-instance by .red / .yellow class (JS adds it
       based on state.stage — original PaintApple uses ApplePic(Stage)). */
    pointer-events: none;
    z-index: 6;
}
.apple-fall.red {
    background-image: url("../assets/Hemed/pictures/GameApple/applered1.png");
    animation: appleFallWobbleRed    0.56s steps(1) 0s,
               appleFallDrop         0.56s cubic-bezier(0.4, 0, 0.7, 1) 0.56s forwards;
}
.apple-fall.yellow {
    background-image: url("../assets/Hemed/pictures/GameApple/appleyellow1.png");
    animation: appleFallWobbleYellow 0.56s steps(1) 0s,
               appleFallDrop         0.56s cubic-bezier(0.4, 0, 0.7, 1) 0.56s forwards;
}
/* Wobble — frames 1..8 of ApplePic on the tree. The shake comes from
   alternating sprite frames; we add a small +/- 2px translateX for visual
   bite, since the original sprites themselves show the apple wiggling. */
/* Wobble — orig AppleFall_Timer:178-180 loops Frame 1..8 of ApplePic(Stage)
   (8 frames). Our asset numbering is 0-indexed, so VB6 frame 1..8 maps to
   applered0..applered7. All 8 frames cycled for fidelity. */
@keyframes appleFallWobbleRed {
    0%     { background-image: url("../assets/Hemed/pictures/GameApple/applered0.png"); transform: translateX(0); }
    12.5%  { background-image: url("../assets/Hemed/pictures/GameApple/applered1.png"); transform: translateX(-2px); }
    25%    { background-image: url("../assets/Hemed/pictures/GameApple/applered2.png"); transform: translateX(2px); }
    37.5%  { background-image: url("../assets/Hemed/pictures/GameApple/applered3.png"); transform: translateX(-2px); }
    50%    { background-image: url("../assets/Hemed/pictures/GameApple/applered4.png"); transform: translateX(2px); }
    62.5%  { background-image: url("../assets/Hemed/pictures/GameApple/applered5.png"); transform: translateX(-2px); }
    75%    { background-image: url("../assets/Hemed/pictures/GameApple/applered6.png"); transform: translateX(2px); }
    87.5%  { background-image: url("../assets/Hemed/pictures/GameApple/applered7.png"); transform: translateX(-1px); }
    100%   { background-image: url("../assets/Hemed/pictures/GameApple/applered7.png"); transform: translateX(0); }
}
@keyframes appleFallWobbleYellow {
    0%     { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow0.png"); transform: translateX(0); }
    12.5%  { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow1.png"); transform: translateX(-2px); }
    25%    { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow2.png"); transform: translateX(2px); }
    37.5%  { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow3.png"); transform: translateX(-2px); }
    50%    { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow4.png"); transform: translateX(2px); }
    62.5%  { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow5.png"); transform: translateX(-2px); }
    75%    { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow6.png"); transform: translateX(2px); }
    87.5%  { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow7.png"); transform: translateX(-1px); }
    100%   { background-image: url("../assets/Hemed/pictures/GameApple/appleyellow7.png"); transform: translateX(0); }
}
/* Drop — orig is pure parabolic translateY; no rotation. */
@keyframes appleFallDrop {
    0%   { transform: translateY(0); }
    100% { transform: translateY(var(--fall-dy)); }
}

/* Wrong-char label — DrawString CharToDraw at (ApplePos.X+20, Y-50) in
   RGB(220, 0, 0). It hovers above the apple and falls with it. */
.apple-char-label {
    position: absolute;
    color: rgb(220, 0, 0);
    font-weight: 700; font-size: 1.6rem;
    text-shadow: 0 1px 2px rgba(255,255,255,0.9), 0 -1px 0 rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 7;
    /* Matches the apple's wobble-then-drop timing so the char hovers above
       during shake and drops with it. */
    animation: appleFallDrop 0.56s cubic-bezier(0.4, 0, 0.7, 1) 0.56s forwards;
}

/* q_mark pop on freshly-filled answer cell — original Form_KeyUp:622-628
   cycles QMark frames 2..6 (with Sleep 70ms each) at the CharsX position
   before PaintText draws the actual letter. We collapse to a quick scale
   pop using the existing q_mark sprites as keyframes. */
.apple-char.popping {
    animation: appleQMarkPop 0.35s steps(1) forwards;
}
@keyframes appleQMarkPop {
    0%   { background-image: url("../assets/Hemed/pictures/GameApple/q_mark2.png"); transform: scale(1.2); color: transparent; }
    20%  { background-image: url("../assets/Hemed/pictures/GameApple/q_mark3.png"); transform: scale(1.1); color: transparent; }
    40%  { background-image: url("../assets/Hemed/pictures/GameApple/q_mark4.png"); transform: scale(1.0); color: transparent; }
    60%  { background-image: url("../assets/Hemed/pictures/GameApple/q_mark5.png"); transform: scale(0.85); color: transparent; }
    80%  { background-image: url("../assets/Hemed/pictures/GameApple/q_mark6.png"); transform: scale(0.7); }
    100% { background-image: none; transform: scale(1); }
}

/* Goat walks ONE WAY LEFT off-screen — per orig TimerGoatBmp:
   Case 0 (pick-walk): GoatX -= 25 per tick until GoatX < -200, then
     teleport reset to (629, 335). Uses GoatAni0 sprite cycle.
   Case 2 (eat-walk):  GoatX -= 25 (or -18) until GoatX < -200; the goat
     is drawn at GoatY+88 (orig:907) using GoatAni2 sprites. After the
     walk, Stage flips to 1 and InitQuestion resets to (629, 335).
   Both end animations with `forwards`; the next setGoat("stand") removes
   the class and the goat snaps back to its left:629 anchor (= orig
   teleport). Each pose cycles 11 goatani frames over the walk. */
/* Walks: position-only transform animations. The sprite frame cycling
   is JS-driven via the stacked-<img> approach (no CSS bg-image swap).
   - Pick-walk (Case 0): 829 px / 25 px-per-tick × 70 ms ≈ 2.59 s.
   - Eat-walk  (Case 2): slower (-18 then -25 px/tick) ≈ 2.80 s. */
.apple-goat.pick-walk { animation: appleGoatWalkLeft 2.59s linear forwards; }
.apple-goat.eat-walk  { animation: appleGoatEatWalk  2.80s linear forwards; }
@keyframes appleGoatWalkLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-820px); }
}
@keyframes appleGoatEatWalk {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-840px); }
}
/* Eat-walk frame imgs are NATIVE 170×90 (half the goat box height).
   Anchor them at the BOTTOM of the container so the goat appears at
   GoatY+88 per orig:907 (carrying off the bad-apple basket). The :is()
   selector narrows to children of the eat-walk-classed goat. */
.apple-goat.eat-walk .apple-goat-frame[data-pose="eat-walk"] {
    top: 88px;
    height: 90px;
}

/* Goat container at GoatX=629, GoatY=335 — 170×178 native. Holds a
   STACK of all frame <img> children (built in apple.js). JS toggles
   which frame has opacity:1; the rest stay loaded in DOM (and in GPU
   cache) at opacity:0. No CSS background-image swap = no transparent
   gap between frames showing back.png through.
   Hidden until first setGoat() per orig Form_Load behavior. */
.apple-goat {
    left: 629px; top: 335px; width: 170px; height: 178px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
}
.apple-goat.visible { opacity: 1; }
/* Each stacked frame img — absolute, full-size, hidden by default.
   The current frame's opacity is set to 1 via JS. No transition (we
   want instant frame switches, not crossfade). */
.apple-goat-frame {
    position: absolute;
    left: 0; top: 0;
    width: 170px; height: 178px;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}
/* Sad/win are JS-driven now; classes kept as state hooks for other CSS. */
.apple-goat.sad   { transform: none !important; animation: none; }
.apple-goat.win   { transform: none; }
.apple-goat.win-loop { transform: none; }

/* Per-pose sprite-cycle keyframes deleted — the goat is now JS-driven
   via stacked <img> opacity toggles (see apple.js _cycleFrames). No
   CSS background-image swaps = no transparent gap between frames. */
/* WinGame's BigApple.jpg at (192, 0) — celebration sprite. */
.apple-big {
    left: 192px; top: 0; width: 410px; height: 384px;
    background-image: url("../assets/Hemed/pictures/GameApple/bigapple.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    z-index: 10;
    pointer-events: none;
    animation: appleBigPop 0.5s ease-out;
}
@keyframes appleBigPop {
    0%   { transform: scale(0.1); opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

.apple-status {
    left: 100px; top: 4px; width: 600px;
    text-align: center; font-size: 0.95rem; color: #2a1d0a; font-weight: 700;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.apple-finish {
    left: 80px; top: 220px; width: 640px;
    text-align: center; font-size: 1.4rem; font-weight: 700; color: #2b5e22;
    background: rgba(255,255,255,0.92);
    border: 3px solid #4a8d3a; border-radius: 12px;
    padding: 1rem;
}

/* --- Connect (GameConnect.frm) ----------------------------------
   Dark wood BG. Each Q/A label uses box.png as its plank background;
   pairs are linked by a "rope" line (SVG <line>). */
.connect-box {
    background-image: url("../assets/Hemed/pictures/GameConnect/box.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 700;
    color: #f6e7c2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    padding: 0 10px;
    cursor: pointer;
    /* Width is set inline per-box (calculated from text length to mirror
       original LoadBox's GetStringWidth*1.2). Let text wrap if needed. */
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}
.connect-box.kind-a {
    background-image: url("../assets/Hemed/pictures/GameConnect/box2.png");
}
.connect-box:hover { filter: brightness(1.15); }
.connect-box.sel   { filter: brightness(1.3) drop-shadow(0 0 8px #ffd76a); }
/* Matched boxes — orig sets Show=False which then renders via boxPic2.bmp
   (a slightly different sprite, indicating "completed"). We swap the
   border tone to match. */
.connect-box.done  { cursor: default; filter: brightness(0.9); }

/* ============ Win celebration (orig WinGame + WinTimer_Timer) ============ */

/* Big stars (one per matched Q) rising from the score row. JS sets
   left/top each tick via spring physics — no CSS keyframe needed. */
.connect-bigstar {
    width: 26px; height: 26px;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    pointer-events: none;
    z-index: 9;
}
.connect-bigstar.frame-1 { background-image: url("../assets/Hemed/pictures/GameConnect/star_1.png"); }
.connect-bigstar.frame-2 { background-image: url("../assets/Hemed/pictures/GameConnect/star_2.png"); }
.connect-bigstar.frame-3 { background-image: url("../assets/Hemed/pictures/GameConnect/star_3.png"); }
/* star_4 not shipped — orig PicClass tops out at frame 3 too */

/* Small star explosion shards (orig smallStars — bouncy physics in JS). */
.connect-smallstar {
    width: 16px; height: 16px;
    position: absolute;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    pointer-events: none;
    z-index: 8;
}
.connect-smallstar.frame-0 { background-image: url("../assets/Hemed/pictures/GameConnect/smallstar_0.png"); }
.connect-smallstar.frame-1 { background-image: url("../assets/Hemed/pictures/GameConnect/smallstar_1.png"); }
.connect-smallstar.frame-2 { background-image: url("../assets/Hemed/pictures/GameConnect/smallstar_2.png"); }
.connect-smallstar.frame-3 { background-image: url("../assets/Hemed/pictures/GameConnect/smallstar_3.png"); }
/* smallstar_4 also missing — clamped in JS */

/* Score count-up + praise text in the centre of the win layer. */
.connect-win-layer { left: 0; top: 0; width: 800px; height: 600px;
                     pointer-events: none; z-index: 7; }
.connect-win-score {
    left: 0; right: 0; top: 200px;
    text-align: center;
    font-family: "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    transition: color 0.2s;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
}
.connect-win-praise {
    left: 0; right: 0; top: 140px;
    text-align: center;
    color: rgb(230, 230, 254);
    font-family: "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 28pt;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Ball cursor sprite that follows the mouse while a box is picked.
   Orig:736 — ballPic.MaskB mX - ballPic.Width/2, mY - ballPic.Height/2.
   24×24 approximation; CSS positioning driven by JS each tick. */
.connect-ball {
    width: 24px; height: 24px;
    background-image: url("../assets/Hemed/pictures/GameConnect/ball.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    transition: opacity 0.15s;
}

/* Per-Q score-row stars at y=545 (orig Timer_Timer:661-687 — draws
   starPic frames alternating right/left side, frame index based on
   ErrorCount: more errors = lower frame = less-bloomed star). */
.connect-score-row { left: 0; top: 0; width: 800px; height: 600px;
                     pointer-events: none; }
.connect-qstar {
    position: absolute; width: 18px; height: 18px;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    pointer-events: none;
}
.connect-qstar.frame-0 { background-image: url("../assets/Hemed/pictures/GameConnect/star_0.png"); opacity: 0.5; }
.connect-qstar.frame-1 { background-image: url("../assets/Hemed/pictures/GameConnect/star_1.png"); }
.connect-qstar.frame-2 { background-image: url("../assets/Hemed/pictures/GameConnect/star_2.png"); }
.connect-qstar.frame-3 { background-image: url("../assets/Hemed/pictures/GameConnect/star_3.png"); }
/* qstar frame-4 — star atlas only ships 0..3; clamped in JS */

/* Picture-mode box (orig LoadBox:600-608 — boxPic frames around a
   per-item picture). Bigger than text box; pic asset as background. */
.connect-box.pic {
    background-size: 100% 100%; background-repeat: no-repeat;
    color: transparent;     /* hide text once bg image loads */
    padding: 0;
    border: 4px solid #d8b07a;
    border-radius: 8px;
}
.connect-box-cap {
    /* Fallback caption shown ONLY if picture asset failed to load.
       Position bottom-center, small dark band. */
    position: absolute; left: 0; right: 0; bottom: 2px;
    color: #2a1d0a; font-size: 0.8rem; text-align: center;
    background: rgba(255,255,255,0.7);
    padding: 1px 4px;
}
.connect-box.pic:not([style*="data:"]) .connect-box-cap {
    /* When bg-image URL is unresolved or 404'd, keep caption visible.
       The default `display` for the cap is inline; no override needed. */
}

/* Instructions overlay (orig Timer_Timer:769-774 — DrawString
   CurrentCalibration.Instructions at (400, 10) in RGB(254,210,190)
   for `showTip` frames after CmdHelp_Click). */
.connect-tip {
    left: 100px; top: 6px; width: 600px;
    text-align: center; color: rgb(254, 210, 190);
    font: 700 1.05rem "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85);
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    padding: 4px 10px;
    pointer-events: none;
    z-index: 4;
    direction: rtl;
}

/* CmdRePlay button (orig:81-93 at L=960,T=120,55×55). Shows after
   first exit-click; click re-routes to same game URL. */
.connect-replay {
    left: 64px; top: 8px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/replay_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    z-index: 50;
}
.connect-replay:hover {
    background-image: url("../assets/Hemed/pictures/replay_on.png");
}

/* --- Hakira (GameHakira.frm) -----------------------------------
   Parchment scroll background (scroll0.png) covering the stage. Text
   is laid out by drawText() calls at .frm-spec X/Y per RePaintLine. */
/* Parchment matches the original `Me.PaintPicture ScrollPicture(N), 45, 0,
   700, height, ...` call — x=45, y=0, width=700, height = each frame's
   NATIVE pixel height. The 6 source bitmaps have very different heights:
     scroll0.png  700×600   (fully unrolled)
     scroll1.png  700×600
     scroll2.png  700×452
     scroll3.png  700×280
     scroll4.png  700×154
     scroll5.png  700×2     (fully rolled up)
   To grow from a thin roll to a full parchment, the keyframes animate
   BOTH height and background-image so each image renders at its native
   aspect. background-size: 100% 100% then maps 1:1 to the container. */
.hakira-parchment {
    left: 45px; top: 0; width: 700px; height: 600px;
    direction: rtl;
    cursor: pointer;
    color: #2a1d0a;
    background-image: url("../assets/Hemed/pictures/GameHakira/scroll0.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
}
/* Unroll on entry (Form_Activate: ScrollUp=True, ScrollCounter=5; timer
   decrements until counter=0). Original interval = 60 + 5*counter ≈ 60..85ms
   per step, ~435ms total. We use ~480ms. */
.hakira-parchment.unrolling {
    animation: hakiraUnroll 0.48s steps(1) forwards;
    cursor: wait;
}
@keyframes hakiraUnroll {
    0%    { height:   2px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll5.png"); }
    16.6% { height: 154px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll4.png"); }
    33.3% { height: 280px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll3.png"); }
    50%   { height: 452px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll2.png"); }
    66.6% { height: 600px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll1.png"); }
    100%  { height: 600px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll0.png"); }
}
/* Roll-up at end-of-list (CmdReset_Click: ScrollUp=False, counter 0→5→0).
   We use the forward leg here; the JS chains an unroll after this finishes. */
.hakira-parchment.rolling-up {
    animation: hakiraRollUp 0.48s steps(1) forwards;
    cursor: wait;
}
@keyframes hakiraRollUp {
    0%    { height: 600px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll0.png"); }
    16.6% { height: 600px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll1.png"); }
    33.3% { height: 452px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll2.png"); }
    50%   { height: 280px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll3.png"); }
    66.6% { height: 154px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll4.png"); }
    100%  { height:   2px; background-image: url("../assets/Hemed/pictures/GameHakira/scroll5.png"); }
}

/* Nivim parchment — same dimensions as Hemed's, but its own painted art
   lives under assets/Nivim/pictures/GameHakira/. Selector binds via the
   data-app attribute that hakira.js stamps onto the parchment element. */
.hakira-parchment[data-app="Nivim"] {
    background-image: url("../assets/Nivim/pictures/GameHakira/scroll0.png");
}
.hakira-parchment[data-app="Nivim"].unrolling {
    animation: hakiraUnrollNivim 0.48s steps(1) forwards;
}
@keyframes hakiraUnrollNivim {
    0%    { height:   2px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll5.png"); }
    16.6% { height: 154px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll4.png"); }
    33.3% { height: 280px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll3.png"); }
    50%   { height: 452px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll2.png"); }
    66.6% { height: 600px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll1.png"); }
    100%  { height: 600px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll0.png"); }
}
.hakira-parchment[data-app="Nivim"].rolling-up {
    animation: hakiraRollUpNivim 0.48s steps(1) forwards;
}
@keyframes hakiraRollUpNivim {
    0%    { height: 600px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll0.png"); }
    16.6% { height: 600px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll1.png"); }
    33.3% { height: 452px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll2.png"); }
    50%   { height: 280px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll3.png"); }
    66.6% { height: 154px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll4.png"); }
    100%  { height:   2px; background-image: url("../assets/Nivim/pictures/GameHakira/scroll5.png"); }
}
/* Hide the text overlay while the scroll is animating. */
.hakira-text-layer.hidden { opacity: 0; transition: opacity 0.15s; }
.hakira-text-layer {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    /* Clicks must reach the parchment underneath (its click handler calls
       GoNext to advance the scroll). Each .hakira-cell child also has
       pointer-events:none, so nothing inside this layer blocks. */
    pointer-events: none;
}
/* Header — UnitName · UserName at top of scroll (y=5-7 in original),
   painted in orange-brown RGB(120,80,40) over RGB(255,200,150) shadow. */
.hakira-header {
    /* Orig Form_Paint:315-317 — DrawString TempStr at (400, 5/7/6) in
       RGB(255,200,150) cream / RGB(120,80,40) brown. SystemFont 22pt. */
    position: absolute;
    left: 50px; right: 50px; top: 4px;
    text-align: center;
    color: rgb(120, 80, 40);
    font: 700 16pt "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    text-shadow:
        0  1px 0 rgb(255, 200, 150),
        0 -1px 0 rgb(255, 200, 150);
    pointer-events: none;
}
/* Help overlay (orig CmdHelp_Click prints CurrentCalibration.Instructions
   to the top of the parchment, briefly). */
.hakira-tip {
    left: 100px; top: 50px; width: 600px; min-height: 30px;
    text-align: center;
    color: rgb(120, 80, 40);
    font: 700 13pt "David CLM", "Heebo", "Segoe UI", Arial, sans-serif;
    background: rgba(255, 240, 220, 0.92);
    border-radius: 6px;
    padding: 4px 10px;
    pointer-events: none;
    z-index: 4;
    direction: rtl;
    display: none;
}
.hakira-instructions {
    position: absolute;
    left: 50px; right: 50px; top: 560px;
    text-align: center;
    color: rgb(120, 80, 50);
    font-size: 0.9rem; font-style: italic;
    pointer-events: none;
}
/* Each drawn line. Positioning is set inline per RePaintLine's vbXJustify.
   pointer-events:none so clicks on a rendered Q/A/hint pass through to
   the parchment beneath (without this, clicking on existing text doesn't
   advance the game). */
/* Each drawn line. The original VB6 DrawString just paints at (X, Y) and
   lets the text run off the parchment when too long. We let it wrap to
   the column's max-width so it stays inside the scroll area. Row spacing
   (Y_STEP = 450/LinesIn = 75px when LinesIn=6) leaves room for two lines. */
.hakira-cell {
    position: absolute;
    font-size: 1.2rem;
    line-height: 1.1;
    direction: ltr;        /* parent direction; per-cell text-align controls anchoring */
    pointer-events: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.hakira-num  { color: rgb(20, 100, 0); font-weight: 700; font-size: 1.15rem; }
.hakira-ask  { color: #2a1d0a; font-weight: 700; }
.hakira-ans  { color: #5b3a14; }
.hakira-hint { color: rgb(120, 80, 50); font-style: italic; font-size: 1rem; }
/* Picture-mode tile — 130×140 image bound to data/<App>/unit_N/pic/<idx>.png.
   Sits inline with the row's text per orig GoNext:449-462. */
.hakira-pic {
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* line2.bmp divider — small ornamental separator between rows. */
.hakira-divider {
    position: absolute; height: 6px;
    background-image: url("../assets/Hemed/pictures/GameHakira/line2.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    pointer-events: none;
}

.hakira-reset {
    left: 16px; top: 432px; width: 60px; height: 60px;
    background-image: url("../assets/Hemed/pictures/GameHakira/reset_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
}
.hakira-reset:hover  { background-image: url("../assets/Hemed/pictures/GameHakira/reset_on.png"); }
.hakira-reset:active { background-image: url("../assets/Hemed/pictures/GameHakira/reset_down.png"); }

.hakira-next {
    left: 0; top: 496px; width: 60px; height: 60px;
    background-image: url("../assets/Hemed/pictures/GameHakira/next_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
}
.hakira-next:hover  { background-image: url("../assets/Hemed/pictures/GameHakira/next_on.png"); }
.hakira-next:active { background-image: url("../assets/Hemed/pictures/GameHakira/next_down.png"); }

/* --- Haklada (GameHaklada.frm) - typing dictation game -----------
   Practice mode (backtt.png): Q text on top plank, type into bottom plank.
   Dictation mode (backt.png): only typing plank, Q audio only.
   Knas label at (120, 8160) → (8, 544). CmdSound at (10530, 7410) →
   (702, 494, 98, 106). Header at top, RGB(50, 100, 210).
   Flowers along 3 rows at y=110/135/160, spaced 65px apart. */
.hak-flower-layer { left: 0; top: 0; width: 800px; height: 600px;
                    pointer-events: none; }
.hak-header {
    /* Orig Form_Paint draws 3-layered text at y=10/12/14 in
       RGB(180,220,255)/RGB(150,200,255)/RGB(50,100,210) at 22pt
       System Hebrew font (~29px). Approximate with CSS text-shadow. */
    left: 0; right: 0; top: 8px;
    text-align: center; font-size: 22pt; font-weight: 700;
    font-family: "David CLM", "Arial Hebrew", "Heebo", "Segoe UI", Arial, sans-serif;
    color: rgb(50, 100, 210);
    text-shadow:
        0 2px 0 rgb(180, 220, 255),
        0 -2px 0 rgb(150, 200, 255);
    pointer-events: none;
}
.hak-q-visible {
    /* Top plank text (practice mode, backtt.png). Original draws
       at TextY-80=325 (clear band 50 tall) but the actual text is
       offset down by (50-CurrFontSize)/2 ≈ 10 → text top at y=335.
       TextX=390 center, TextMaxWidth=550 → spans x≈115..665. */
    left: 115px; top: 325px; width: 550px; height: 50px;
    text-align: center;
    font-size: 1.6rem; font-weight: 700;
    color: #2a1d0a;
    direction: rtl;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hak-typing {
    /* Bottom plank where the user types. Original draw calls:
       BigQMark cursor at TextY=405 (top), SmallQMark pending at
       TextY+10=415, text baseline ≈ TextY+10. Top-align cells to
       y=405 and offset the smaller ones down 10px to match. */
    left: 90px; top: 405px; width: 620px; height: 60px;
    text-align: center;
    direction: rtl;
    font-size: 2rem;
    color: #2a1d0a;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.hak-typing.shake { animation: shake 0.4s; }
.hak-cell {
    /* Original PaintText: real chars draw at the font's native advance,
       Q-marks are exactly 21px (small) / 30px (cursor) wide, NO margin
       between cells. Don't add min-width/margin or the row balloons. */
    display: inline-block;
    text-align: center;
    transition: color 0.15s;
}
/* Original DrawString at `TextY + (50 - CurrFontSize) / 2` ≈ TextY+10
   for letters/spaces; SmallQMarkPic.MaskB at TextY+10. Push these
   down 10px so their tops match. The cursor cell sits at TextY=top. */
.hak-cell.typed       { color: #2a1d0a; font-weight: 700; margin-top: 10px; }
.hak-cell.non-letter  { color: rgba(80, 50, 20, 0.7);
                        margin-top: 10px;
                        white-space: pre; /* keep word-gap spaces */ }
.hak-cell.pending {
    /* SmallQMarkPic — Q_Mark.bmp (no number suffix), 21×35,
       drawn 10px below TextY in the original. */
    width: 21px; height: 35px; margin-top: 10px;
    background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark.png");
    background-size: 100% 100%; background-repeat: no-repeat;
}
.hak-cell.cursor {
    /* BigQMarkPic — Q_Mark1..8.bmp animated, 30×50, drawn at TextY
       (top of the typing band — i.e. no margin offset). Original
       TimerQMark.Interval=110ms × 8 frames = 0.88s per cycle. */
    width: 30px; height: 50px;
    background-size: 100% 100%; background-repeat: no-repeat;
    animation: hakBigQMark 0.88s steps(1) infinite;
}
.hak-cell.hint-show {
    /* Briefly show the expected letter in red after 2 wrong attempts. */
    color: rgb(100, 0, 0); font-weight: 700;
    background: none;
    animation: none;
}
@keyframes hakBigQMark {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark0.png"); }
    14%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark1.png"); }
    28%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark2.png"); }
    42%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark3.png"); }
    57%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark4.png"); }
    71%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark5.png"); }
    85%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark6.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark7.png"); }
}
.hak-start-hint {
    font-size: 1.2rem; color: rgba(91, 58, 20, 0.7);
    font-style: italic;
}

.hak-sound {
    left: 702px; top: 494px; width: 98px; height: 106px;
    background-image: url("../assets/Hemed/pictures/GameHaklada/sound_on.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
}
.hak-sound:active {
    background-image: url("../assets/Hemed/pictures/GameHaklada/sound_off.png");
}
.hak-knas {
    /* Original Knas label: Left=8 Top=544 W=73 H=41, Arial 21.75pt,
       ForeColor &H00000040& (VB6 BGR → R=0 G=0 B=64 = dark blue),
       BackStyle=0 (transparent). */
    left: 8px; top: 544px; width: 73px; height: 41px;
    text-align: center; font: 700 21.75pt Arial, sans-serif;
    color: rgb(0, 0, 64);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
}

/* Flowers along 3 rows at the top of the meadow. */
.hak-flower {
    position: absolute; width: 38px; height: 60px;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
}
.hak-flower.seed {
    background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_0.png");
    opacity: 0.5;
}
/* Bloom is now JS-driven via growFlower().step(frame) — each call swaps
   background-image to the next frame, in sync with goat tick. The
   per-keyframe CSS @keyframes blocks below are retained as fallback
   visual but unused unless a caller adds the `.growing.bloom-*` class. */
@keyframes hakFlower1Full {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_0.png"); opacity: 0.5; }
    20%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_2.png"); opacity: 1; }
    40%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_4.png"); }
    60%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_6.png"); }
    80%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_8.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_9.png"); }
}
@keyframes hakFlower1Half {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_0.png"); opacity: 0.5; }
    33%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_2.png"); opacity: 1; }
    66%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_4.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_5.png"); }
}
@keyframes hakFlower1Sparse {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_0.png"); opacity: 0.5; }
    50%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_2.png"); opacity: 1; }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower1_3.png"); }
}
@keyframes hakFlower2Full {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_0.png"); opacity: 0.5; }
    20%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_2.png"); opacity: 1; }
    40%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_4.png"); }
    60%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_6.png"); }
    80%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_8.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_9.png"); }
}
@keyframes hakFlower2Half {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_0.png"); opacity: 0.5; }
    33%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_2.png"); opacity: 1; }
    66%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_4.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_5.png"); }
}
@keyframes hakFlower2Sparse {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_0.png"); opacity: 0.5; }
    50%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_2.png"); opacity: 1; }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower2_3.png"); }
}
@keyframes hakFlower3Full {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_0.png"); opacity: 0.5; }
    20%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_2.png"); opacity: 1; }
    40%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_4.png"); }
    60%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_6.png"); }
    80%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_8.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_9.png"); }
}
@keyframes hakFlower3Half {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_0.png"); opacity: 0.5; }
    33%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_2.png"); opacity: 1; }
    66%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_4.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_5.png"); }
}
@keyframes hakFlower3Sparse {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_0.png"); opacity: 0.5; }
    50%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_2.png"); opacity: 1; }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower3_3.png"); }
}
/* Kind-3 = flower4_*.png ("eaten" state set by orig TimerGoat:719
   `FlowerKind(Current - 1) = 3` for 3+ error flowers). flower4 has
   only 4 frames so always render via the sparse 3-frame keyframe. */
.hak-flower.kind-3.growing.bloom-full,
.hak-flower.kind-3.growing.bloom-half,
.hak-flower.kind-3.growing.bloom-sparse {
    animation: hakFlower4Sparse 0.3s steps(1) forwards;
}
@keyframes hakFlower4Sparse {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/flower4_0.png"); opacity: 0.5; }
    50%  { background-image: url("../assets/Hemed/pictures/GameHaklada/flower4_1.png"); opacity: 1; }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/flower4_3.png"); }
}
/* Picture mode reveal (orig TimerShowPic blits successive bands of
   QPic at 512,324 over ~330ms). We use a CSS clip-path reveal which
   gets us the same visual without per-frame canvas blits. */
.hak-pic {
    left: 512px; top: 324px; width: 280px; height: 200px;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    pointer-events: none;
    z-index: 2;
    clip-path: inset(0 0 100% 0);
}
.hak-pic.reveal { animation: hakPicReveal 0.33s steps(10) forwards; }
@keyframes hakPicReveal {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0    0); }
}
/* Calibration instructions overlay (orig CmdHelp_Click draws
   Instructions at (400, 40) in RGB(40,80,190); WaveMe_Done erases
   via BitBlt 100,40,600,30 when game2.wav finishes). */
.hak-help {
    left: 100px; top: 40px; width: 600px; min-height: 30px;
    text-align: center; font: 700 14pt Arial, sans-serif;
    color: rgb(40, 80, 190);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    padding: 6px 10px;
    pointer-events: none;
    z-index: 4;
    direction: rtl;
    display: none;
}
/* Haklada goat — 130×136. JS drives position + frame: see haklada.js
   goatState / paintGoat / TimerGoat. Original GameHaklada.frm Form_Load
   sets GoatX=900 (off-screen right) GoatY=55, then Form_Paint starts
   TimerGoat with GoatStatus=1 (jump in). The 7 sprite families
   (goat0..goat6) are each pre-loaded; haklada.js swaps the
   background-image as the goat ticks. */
.hak-goat {
    /* No background-image / left / top here — haklada.js paintGoat()
       sets all of them inline every tick. JS picks the correct per-app
       asset path (Hemed vs Nivim) so we don't hardcode the wrong one. */
    width: 130px; height: 136px;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    z-index: 3;
    pointer-events: none;
}

/* QMark cursor — 8-frame cycle that bounces above the signboard.        */
.hak-qmark {
    display: inline-block;
    width: 30px; height: 50px;
    margin: 0 8px;
    background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark0.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    animation: hakQMark 0.6s steps(1) infinite;
    vertical-align: middle;
}
@keyframes hakQMark {
    0%   { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark0.png"); }
    12%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark1.png"); }
    25%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark2.png"); }
    37%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark3.png"); }
    50%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark4.png"); }
    62%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark5.png"); }
    75%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark6.png"); }
    87%  { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark7.png"); }
    100% { background-image: url("../assets/Hemed/pictures/GameHaklada/q_mark0.png"); }
}

.hak-status {
    left: 0; top: 4px; width: 800px;
    text-align: center; font-size: 0.95rem; color: #2a1d0a;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
    font-weight: 700;
}
.hak-finish {
    left: 80px; top: 220px; width: 640px;
    text-align: center; font-size: 1.4rem; font-weight: 700; color: #2b5e22;
    background: rgba(255,255,255,0.92);
    border: 3px solid #4a8d3a; border-radius: 12px;
    padding: 1rem;
}

/* --- Score Form (ScoreForm.frm) — end-of-game results overlay -----
   600×600 parchment. Drawn at .frm coords:
     Unit name (300, 5), font 24, RGB(100,50,80)
     User name (300, 155), font 24
     "סיים את היחידה" (350, 200)
     Praise text (200, 234), font 44, green/yellow gradient
     Score number animated, centered in the score circle (~212, 194)
     Error counts (287, 352 + 29*i) for i=0..2 (green/yellow/red)
     CmdExit bottom-left, CmdPlay bottom-right. */
.score-form {
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.0);
    font-family: inherit;
    direction: rtl;
}
/* Sin-eased slide-in (Form_Activate Y from 600→0). */
.score-form-enter { transform: translateY(600px); opacity: 0; }
.score-form-on    {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity   0.5s ease-out;
}

/* F1 help overlay — banner pinned just below the title with the unit's
   calibration Instructions text, auto-dismisses after a few seconds. */
.help-overlay {
    left: 80px; top: 250px; width: 640px;
    padding: 1.1rem 1.4rem;
    background: rgba(255,253,240,0.96);
    border: 3px solid rgb(184, 136, 64);
    border-radius: 14px;
    color: rgb(60, 35, 10);
    font-size: 1.15rem; font-weight: 600;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    z-index: 80;
    direction: rtl;
    animation: helpFadeIn 0.25s ease-out;
}
@keyframes helpFadeIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ScoreForm coordinates transcribed from ScoreForm.frm Form_Paint (the
   form's own coordinate space is 600×600; our overlay is sized to match).
   Every DrawString call positions text via vbCenter (HORIZONTALLY centered
   at the given X), so each element uses `left: <X>px; transform:
   translateX(-50%)` to mimic that anchor exactly. FontSize values come
   straight from Me.FontSize = N (pt) → roughly N×1.333 px at 96 DPI. */

/* DrawString tmpStr (= UnitName + AllTips(116) " · "), (300, 5), 24pt,
   RGB(100, 50, 80). */
.score-unit {
    position: absolute; left: 300px; top: 5px;
    transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    font-size: 32px; font-weight: 700;
    color: rgb(100, 50, 80);
}
/* DrawString UserName, (300, 155), 24pt, RGB(20, 50, 80). */
.score-user {
    position: absolute; left: 300px; top: 155px;
    transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    font-size: 32px; font-weight: 700;
    color: rgb(20, 50, 80);
}
/* DrawString AllTips(172) "סיימת את היחידה", (350, 200), 14pt,
   RGB(20, 50, 80). */
.score-finished {
    position: absolute; left: 350px; top: 200px;
    transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    font-size: 19px; font-weight: 700;
    color: rgb(20, 50, 80);
}
/* DrawString AllTips(124..128) praise, (200, 234), 44pt, triple-shadow
   RGB(0,254,0) at y-1, RGB(0,0,0) at y+4, RGB(184,230,80) at y. */
.score-praise {
    position: absolute; left: 200px; top: 234px;
    transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    font-size: 58px; font-weight: 700;
    color: rgb(184, 230, 80);
    text-shadow:
        0 -1px 0 rgb(0, 254, 0),
        2px  4px 0 rgb(0, 0, 0);
}
/* Animated score number (ScoreTimer_Timer), (212, 194 - currentScore/12).
   font-size: 24pt initial (matches Me.FontSize before any tick); JS bumps
   it via inline style each tick (`24 + currentScore/6` pt) and updates
   top/color too. */
.score-number {
    position: absolute; left: 212px; top: 194px;
    transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    font-size: 24pt; font-weight: 700;
    color: rgb(200, 0, 0);
}
/* DrawString Err(i), (287, 352 + 29*i), 14pt, triple-rendered with grey
   shadow at y±1 and black main. Three separate elements at i=0/1/2. */
.score-err {
    position: absolute; left: 287px;
    transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    font-size: 19px; font-weight: 700;
    color: #000;
    text-shadow:
        0 -1px 0 rgb(150, 150, 150),
        0  1px 0 rgb(150, 150, 150);
}
.score-err-0 { top: 352px; }
.score-err-1 { top: 381px; }
.score-err-2 { top: 410px; }

/* Donut chart (CircleTimer in ScoreForm.frm). Center (390, 385); radius
   grows from 0 → 75 over ~2 s. JS sets the conic-gradient with three
   sectors per error bucket; CSS animates the size and finally a slight
   color-saturation for the "bright finish" feel. */
.score-pie {
    position: absolute; left: 390px; top: 385px;
    width: 2px; height: 2px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: scorePieGrow 1.85s cubic-bezier(0.25, 0.85, 0.5, 1) forwards;
    pointer-events: none;
}
@keyframes scorePieGrow {
    0%   { width:   2px; height:   2px; filter: brightness(0.6); }
    100% { width: 150px; height: 150px; filter: brightness(1); }
}

/* CmdExit L=0  T=7290 W=3210 H=1020 → 0, 486, 214, 68 */
.score-exit {
    position: absolute; left: 0; top: 486px; width: 214px; height: 68px;
    background-image: url("../assets/Hemed/pictures/Main/scoreexit.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    color: transparent;
}
.score-exit[data-app="Nivim"]       { background-image: url("../assets/Nivim/pictures/Main/scoreexit.png"); }
.score-exit:hover                   { background-image: url("../assets/Hemed/pictures/Main/scoreexit2.png"); }
.score-exit[data-app="Nivim"]:hover { background-image: url("../assets/Nivim/pictures/Main/scoreexit2.png"); }

/* CmdPlay L=6045 T=7140 W=2475 H=1095 → 403, 476, 165, 73 */
.score-play {
    position: absolute; left: 403px; top: 476px; width: 165px; height: 73px;
    background-image: url("../assets/Hemed/pictures/Main/scoreplay.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    color: transparent;
}
.score-play[data-app="Nivim"]       { background-image: url("../assets/Nivim/pictures/Main/scoreplay.png"); }
.score-play:hover                   { background-image: url("../assets/Hemed/pictures/Main/scoreplay2.png"); }
.score-play[data-app="Nivim"]:hover { background-image: url("../assets/Nivim/pictures/Main/scoreplay2.png"); }

/* Tiny error banner when data fails to load */
.error {
    position: absolute; top: 200px; left: 100px; right: 100px;
    background: rgba(255,250,235,0.95); border: 2px dashed #c33;
    border-radius: 10px; padding: 1.5rem; text-align: center; color: #c33;
}

/* ====== UnitListForm edit-mode buttons (AllowEdit=True) ======
   CmdEdit(0..3) at L=0, T=168/224/280/336, all 175×53. Original
   UnitListForm.frm:391-394 paints each with smallscroll.bmp and overlays
   AllTips(151+i) text via DrawString in RGB(100,100,150). */
.unit-edit-btn {
    left: 0; width: 175px; height: 53px;
    background-image: url("../assets/Hemed/pictures/UnitList/smallscroll.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    z-index: 60;
}
/* GAP 16 — orig CmdEdit_MouseOn:287-290 slides the button left by 3 px
   on hover (CmdEdit(i).Left = .Left - 3). */
.unit-edit-btn:hover  {
    filter: brightness(1.10);
    transform: translateX(-3px);
    transition: transform 0.1s ease-out;
}
.unit-edit-btn:active { filter: brightness(0.92); }
.unit-edit-cap {
    position: absolute;
    left: 0; right: 0; top: 10px;
    text-align: center;
    color: rgb(100, 100, 150);
    font-family: "Arial", sans-serif;
    font-size: 16px; font-weight: 700;
    pointer-events: none;
    direction: rtl;
}

/* ====== Student manager (StudentForm.frm — full 1:1 port) ======
   Background = studentBack.jpg painted via .stage. All controls overlaid
   at original .frm pixel coords (twips/15). 11 painted CmdPlus buttons
   come from studCmd0..studCmd10.png (BMP → PNG, black=transparent). */
.studform-exit {
    /* CmdExit L=75 T=30 W=825 H=825 → 5, 2, 55, 55. The shared exit-icon
       sprite is reused here so the corner icon matches everywhere else. */
    left: 5px; top: 2px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/exit_on.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
}
.studform-exit:hover { background-image: url("../assets/Hemed/pictures/exit_down.png"); }
.studform-help {
    /* CmdHelp L=11100 T=30 → 740, 2, 55, 55 */
    left: 740px; top: 2px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/help_on.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
}
.studform-help:hover { background-image: url("../assets/Hemed/pictures/help_down.png"); }
.studform-frame {
    /* Shape1 L=2580 T=1515 W=5625 H=6375 → 172, 101, 375, 425.
       Original VB6 Shape with BorderWidth=3, no fill. */
    left: 172px; top: 101px; width: 375px; height: 425px;
    border: 3px solid rgb(60, 30, 5);
    background: rgba(255,255,255,0.45);
    pointer-events: none;
}
.studform-users-list {
    /* ListUsers L=3525 T=1560 W=4575 H=6255 → 235, 104, 305, 417 */
    left: 235px; top: 104px; width: 305px; height: 417px;
    overflow-y: auto;
    direction: rtl;
    background: transparent;
    padding: 4px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgb(60, 30, 5) transparent;
}
.studform-scores-list {
    /* ListScores L=2640 T=1560 W=945 H=6255 → 176, 104, 63, 417.
       Scroll-locked with users list (overflow hidden — the users list
       drives it via the row count). */
    left: 176px; top: 104px; width: 63px; height: 417px;
    overflow: hidden;
    direction: rtl;
    background: transparent;
    padding: 4px 0;
    text-align: center;
}
.studform-row {
    padding: 5px 8px; cursor: pointer;
    border-bottom: 1px solid rgba(60, 30, 5, 0.18);
    display: flex; align-items: center; gap: 6px;
    font-size: 1.05rem; color: rgb(50, 100, 0);
    height: 28px; box-sizing: border-box;
}
.studform-row:hover { background: rgba(184, 136, 64, 0.12); }
.studform-row.sel   { background: rgba(184, 136, 64, 0.28); }
.studform-row.active { font-weight: 700; color: rgb(20, 60, 0); }
.studform-check  { font-size: 0.95rem; color: rgb(60, 30, 5); width: 16px; flex-shrink: 0; }
.studform-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studform-score-cell {
    padding: 5px 4px;
    border-bottom: 1px solid rgba(60, 30, 5, 0.18);
    font-size: 1.05rem; font-weight: 700; color: rgb(50, 100, 0);
    height: 28px; box-sizing: border-box;
}
.studform-score-cell.sel { background: rgba(184, 136, 64, 0.20); }
.studform-empty {
    padding: 1.5rem; text-align: center; color: rgb(80, 50, 20); opacity: 0.7;
}

/* CmdPlus painted buttons — each loads its specific studCmdN.png with
   the BMP-black=transparent convention. Hover = slight brighten. */
.studform-cmd {
    position: absolute;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    background-size: 100% 100%; background-repeat: no-repeat;
}
.studform-cmd:hover  { filter: brightness(1.10); }
.studform-cmd:active { filter: brightness(0.92); }
.studform-cmd.cmd0   { background-image: url("../assets/Hemed/pictures/Main/studCmd0.png"); }
.studform-cmd.cmd1   { background-image: url("../assets/Hemed/pictures/Main/studCmd1.png"); }
.studform-cmd.cmd2   { background-image: url("../assets/Hemed/pictures/Main/studCmd2.png"); }
.studform-cmd.cmd3   { background-image: url("../assets/Hemed/pictures/Main/studCmd3.png"); }
.studform-cmd.cmd4   { background-image: url("../assets/Hemed/pictures/Main/studCmd4.png"); }
.studform-cmd.cmd5   { background-image: url("../assets/Hemed/pictures/Main/studCmd5.png"); }
.studform-cmd.cmd10  {
    /* CmdEdit(10) at L=9480 T=120 → 632, 8, 89, 46. */
    left: 632px; top: 8px; width: 89px; height: 46px;
    background-image: url("../assets/Hemed/pictures/Main/studCmd10.png");
}

/* ====== Lesson editor (UnitEditorForm.frm — full 1:1 port) ======
   Background = UnitEditor/Back.jpg (800×600). DataFrame is the scroll
   viewport between (30,120) and (719,520); ScrollData on the right at
   x=664; right toolbar at x=752. */
.ued-exit {
    /* CmdExit L=75 T=30 → 5, 2, 55, 55 */
    left: 5px; top: 2px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/exit_on.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: none; padding: 0; cursor: pointer;
}
.ued-exit:hover { background-image: url("../assets/Hemed/pictures/exit_down.png"); }
.ued-save {
    /* CmdSave L=1080 T=120 → 72, 8, 55, 55. Save_on/off pair painted PNGs. */
    left: 72px; top: 8px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/Save_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: none; padding: 0; cursor: pointer;
}
.ued-save:hover {
    background-image: url("../assets/Hemed/pictures/UnitEditor/Save_on.png");
}
.ued-defaults {
    /* CmdSetDefaults L=9360 T=75 W=825 H=825 → 624, 5, 55, 55.
       Original (UnitEditorForm.frm:1774):
           Set CmdSetDefaults.Picture = LoadPicture(PicPath + "\UnitEditor\calib_off.bmp")
       calib_off.bmp is 55×55 — fits the slot exactly, no stretching.
       The .frm sets no MovePic (no hover image), so we don't swap on hover. */
    left: 624px; top: 5px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/calib_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: none; padding: 0; cursor: pointer;
}
.ued-print {
    /* CmdPrint L=10200 T=75 W=825 H=720 → 680, 5, 55, 48 */
    left: 680px; top: 5px; width: 55px; height: 48px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/Print_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: none; padding: 0; cursor: pointer;
}
.ued-print:hover {
    background-image: url("../assets/Hemed/pictures/UnitEditor/Print_on.png");
}
.ued-help {
    /* CmdHelp 740, 2, 55, 55 */
    left: 740px; top: 2px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/help_on.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: none; padding: 0; cursor: pointer;
}
.ued-help:hover { background-image: url("../assets/Hemed/pictures/help_down.png"); }
.ued-adv {
    /* CmdAdv L=742 T=344 W=55 H=55. CmdAdv_Click() hides itself and reveals
       the advanced toggles (CmdShowWave etc.). The button's only visual is
       Adv.bmp — the original has no caption painted into it. */
    left: 742px; top: 344px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/Adv.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
}
.ued-unitname {
    /* TxtUnitName L=3480 T=330 W=4095 H=450 → 232, 22, 273, 30. */
    left: 232px; top: 22px; width: 273px; height: 30px;
    border: 2px solid rgb(60, 30, 5);
    border-radius: 4px;
    background: rgba(255, 253, 240, 0.92);
    color: rgb(40, 25, 5); padding: 0 8px;
    font-family: inherit; font-size: 1.05rem; font-weight: 700;
    direction: rtl; text-align: right;
}
.ued-subject {
    /* TxtUnitSubject L=3600 T=1110 → 240, 74, 265, 26. */
    left: 240px; top: 74px; width: 265px; height: 26px;
    border: 2px solid rgb(60, 30, 5);
    border-radius: 4px;
    background: rgba(255, 253, 240, 0.92);
    color: rgb(40, 25, 5); padding: 0 8px;
    font-family: inherit; font-size: 0.95rem;
    direction: rtl; text-align: right;
}
.ued-unit-picker {
    /* Same row as TxtUnitSubject, left side — replaces the original
       ComboRama that lived at (120,74,169×26) but in our port we want
       the user to choose WHICH unit, not which rama. */
    left: 30px; top: 74px; width: 200px; height: 26px;
    border: 2px solid rgb(60, 30, 5);
    border-radius: 4px;
    background: rgba(255, 253, 240, 0.92);
    color: rgb(40, 25, 5); padding: 0 4px;
    font-family: inherit; font-size: 0.92rem;
    direction: rtl; text-align: right;
}
.ued-data-frame {
    /* DataFrame L=450 T=1800 W=10335 H=6000 → 30, 120, 689, 400.
       Natural DataContainer.jpg tile is 690×200 (a 2-row zebra pattern,
       100px per row). Tile vertically at its native size so the bands
       line up with the 100px row template. */
    left: 30px; top: 120px; width: 689px; height: 400px;
    overflow: hidden;
    background-image: url("../assets/Hemed/pictures/UnitEditor/DataContainer.jpg");
    background-size: 689px 200px;
    background-repeat: repeat-y;
    border: 2px solid rgb(60, 30, 5);
    direction: rtl;
}
.ued-empty {
    padding: 2rem; text-align: center; color: rgb(60, 30, 5); opacity: 0.7;
}
.ued-scroll-data {
    /* ScrollData L=9960 T=0 (relative to DataFrame) → 664, 0 in DataFrame
       space → ABSOLUTE (30+664, 120+0) = (694, 120, 25, 400). ScrollData is
       a CHILD of DataFrame in the .frm, not a sibling of the form root.
       ScrollDataBack.jpg is 25×680; stretch to the 400-tall track. */
    left: 694px; top: 120px; width: 25px; height: 400px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/ScrollDataBack.jpg");
    background-size: 25px 400px; background-repeat: no-repeat;
    cursor: pointer;
    z-index: 2;
}
.ued-scroll-data-thumb {
    position: absolute;
    left: 0; right: 0; top: 15px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/ScrollDataMiddle.jpg");
    background-size: 100% 100%; background-repeat: no-repeat;
}
.ued-scroll-width {
    /* ScrollTextWidth L=450 T=7785 W=10335 H=375 → 30, 519, 689, 25.
       Background JPG is 680×25 — stretch to fit our 689×25. */
    left: 30px; top: 519px; width: 689px; height: 25px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/ScrollWidthBack.jpg");
    background-size: 689px 25px; background-repeat: no-repeat;
}

/* Right-toolbar painted buttons */
.ued-tool {
    position: absolute; width: 40px; height: 40px;
    background-color: transparent;
    background-size: 100% 100%; background-repeat: no-repeat;
    border: none; padding: 0; cursor: pointer;
}
.ued-tool:hover  { filter: brightness(1.15); }
.ued-tool:active { filter: brightness(0.9); }
.ued-add  { background-image: url("../assets/Hemed/pictures/UnitEditor/add_off.png"); }
.ued-add:hover  { background-image: url("../assets/Hemed/pictures/UnitEditor/add_on.png"); }
.ued-del  { background-image: url("../assets/Hemed/pictures/UnitEditor/Del_off.png"); }
.ued-del:hover  { background-image: url("../assets/Hemed/pictures/UnitEditor/Del_on.png"); }
.ued-up   { background-image: url("../assets/Hemed/pictures/UnitEditor/up_off.png"); }
.ued-up:hover   { background-image: url("../assets/Hemed/pictures/UnitEditor/Up_On.png"); }
.ued-down { background-image: url("../assets/Hemed/pictures/UnitEditor/Down_off.png"); }
.ued-down:hover { background-image: url("../assets/Hemed/pictures/UnitEditor/Down_On.png"); }

/* Each data row — original DataContainer is 665×100 (cloned per item).
   WaveLeft (8,8)  TextLeft (40,8,145×33)  TextRight (400,8,113×33)
   TextHint (152,56,401×33)  LinePic (512,48,52×44)  LblNumber (616,8,41×33) */
.ued-data-row {
    position: absolute; left: 0; right: 0; height: 100px;
    border-bottom: 1px dashed rgba(60, 30, 5, 0.35);
    cursor: pointer;
}
.ued-data-row.sel {
    background: rgba(255, 240, 180, 0.4);
}
.ued-data-row:hover {
    background: rgba(255, 240, 180, 0.22);
}
/* All three textboxes use Arial 15.75pt in the .frm — ~21px at 96 DPI.
   LblNumber uses Arial 27.75pt — ~37px.
   Original .frm widths (TextLeft=145, TextRight=113, TextHint=401) were
   designed for the smaller LevTextBox; we keep the .frm Y positions and
   row heights but widen the inputs to fill the unused horizontal space.
   Constraints (row coord space 0..665, scrollbar covers x>=664):
     LblNumber sits at (616, 8, 41×33) — top row, rightmost
     TextRight must end ≤ 600 (16 px gap to LblNumber)
     TextLeft starts at 40, ends with a small gap before TextRight
     TextHint can use almost the whole bottom row width
   Result on top row: TextLeft 40→310 (w=270) | gap 20 | TextRight 330→600 (w=270)
   Bottom row: TextHint 40→600 (w=560). */
.ued-text-left {
    position: absolute; left: 40px; top: 8px;
    width: 270px; height: 33px;
    border: 1px solid rgba(60, 30, 5, 0.5);
    border-radius: 3px;
    background: rgba(255, 250, 235, 0.94);
    color: rgb(40, 25, 5); padding: 0 6px;
    font-family: "Arial", sans-serif; font-size: 21px;
    direction: rtl; text-align: right;
}
.ued-text-right {
    position: absolute; left: 330px; top: 8px;
    width: 270px; height: 33px;
    border: 1px solid rgba(60, 30, 5, 0.5);
    border-radius: 3px;
    background: rgba(255, 250, 235, 0.94);
    color: rgb(40, 25, 5); padding: 0 6px;
    font-family: "Arial", sans-serif; font-size: 21px;
    direction: rtl; text-align: right;
    font-weight: 700;
}
.ued-text-hint {
    position: absolute; left: 40px; top: 56px;
    width: 560px; height: 33px;
    border: 1px solid rgba(60, 30, 5, 0.4);
    border-radius: 3px;
    background: rgba(255, 250, 235, 0.85);
    color: rgb(80, 50, 20); padding: 0 6px;
    font-family: "Arial", sans-serif; font-size: 21px; font-style: italic;
    direction: rtl; text-align: right;
}
.ued-lbl-num {
    position: absolute; left: 616px; top: 8px;
    width: 41px; height: 33px;
    line-height: 33px; text-align: center;
    color: rgb(20, 100, 0); font-weight: 700;
    font-family: "Arial", sans-serif; font-size: 28px;
}
.ued-line-pic {
    position: absolute; left: 512px; top: 48px;
    width: 52px; height: 44px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/Line.jpg");
    background-size: 100% 100%; background-repeat: no-repeat;
    pointer-events: none;
}

/* CmdShowWave toggle (752, 328, 40×40) — original Visible=False, our port
   shows it always so the user can reach the recording feature. Highlights
   when active. */
.ued-show-wave {
    /* CmdShowWave L=752 T=328 W=40 H=40 (Visible=False in .frm).
       Revealed only after CmdAdv_Click — at that point CmdAdv hides itself,
       so the two never overlap. */
    left: 752px; top: 328px; width: 40px; height: 40px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/Sound_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: 2px solid transparent;
    padding: 0; cursor: pointer;
    display: none;             /* hidden until advanced mode is enabled */
}
.ued-data-frame.adv-on ~ .ued-show-wave,
.stage.adv-on .ued-show-wave { display: block; }
.ued-show-wave:hover,
.ued-show-wave.on {
    background-image: url("../assets/Hemed/pictures/UnitEditor/Sound_on.png");
}
.ued-show-wave.on { border-color: rgb(180, 120, 30); border-radius: 4px; }

/* Per-row recording button — WaveLeft (8,8,33×33), WaveRight (368,8,33×33),
   WaveHint (120,56,33×33) per UnitEditorForm.frm. Icon state per
   original WaveX_MouseUp / SetBacks:
     no-record   → Record_Off.jpg   (no .wav file yet)
     has-record  → Record_Off2.jpg  (file exists, ready to play/re-record)
     recording   → Record_On.jpg    (live recording — used while modal is up) */
.ued-wave {
    position: absolute; width: 33px; height: 33px;
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
    border: none; padding: 0; cursor: pointer;
    z-index: 3;
}
.ued-wave.no-record  { background-image: url("../assets/Hemed/pictures/UnitEditor/Record_Off.jpg"); }
.ued-wave.has-record { background-image: url("../assets/Hemed/pictures/UnitEditor/Record_Off2.jpg"); }
.ued-wave.has-record:hover,
.ued-wave.no-record:hover { background-image: url("../assets/Hemed/pictures/UnitEditor/Record_On.jpg"); }

/* When the row has wave buttons visible, the inputs need to shift so the
   buttons fit at their .frm positions without overlap.
     WaveLeft  at x=8..41   → TextLeft must start at x≥50  (was 40)
     WaveRight at x=368..401 → TextLeft must end ≤ 360 AND TextRight at 410
     WaveHint  at x=120..153 → TextHint must start at x≥160
   These reductions only apply while .wave-on is set on the row. */
.ued-data-row.wave-on .ued-text-left  { left: 50px;  width: 310px; }
.ued-data-row.wave-on .ued-text-right { left: 410px; width: 190px; }
.ued-data-row.wave-on .ued-text-hint  { left: 160px; width: 440px; }

/* Recording modal — minimal "card" centered on the stage with a red dot
   pulse, the caption text being recorded, an elapsed timer, and stop/cancel
   buttons. */
.hnd-record-modal {
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    direction: rtl;
}
.hnd-rec-card {
    width: 360px; padding: 24px;
    background: rgb(255, 253, 240);
    border: 3px solid rgb(180, 50, 50);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    text-align: center;
    color: rgb(40, 25, 5);
}
.hnd-rec-dot {
    width: 24px; height: 24px;
    margin: 0 auto 12px;
    background: rgb(220, 30, 30);
    border-radius: 50%;
    animation: hndRecPulse 1s ease-in-out infinite;
}
@keyframes hndRecPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(0.85); }
}
.hnd-rec-caption {
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 6px;
    word-break: break-word;
}
.hnd-rec-time {
    font-size: 1rem; color: rgb(100, 50, 20);
    margin-bottom: 16px;
    font-family: "Arial", sans-serif;
}
.hnd-rec-stop, .hnd-rec-cancel {
    padding: 8px 18px;
    margin: 0 4px;
    border-radius: 6px;
    font-family: inherit; font-size: 0.95rem; font-weight: 700;
    cursor: pointer;
}
.hnd-rec-stop {
    border: 2px solid rgb(60, 130, 50);
    background: rgb(220, 245, 210);
    color: rgb(20, 80, 20);
}
.hnd-rec-stop:hover { background: rgb(200, 235, 190); }
.hnd-rec-cancel {
    border: 2px solid rgb(180, 50, 50);
    background: rgb(255, 230, 230);
    color: rgb(140, 30, 30);
}
.hnd-rec-cancel:hover { background: rgb(250, 215, 215); }

/* ====== Calibration form (CalibrationForm.frm — full 1:1 port) ======
   Background = UnitEditor/Calibration.jpg (800×600). All controls at the
   .frm-derived twips/15 pixel coords. The 8/9 games and their per-game
   control set come from Data/Calib.txt, parsed to calib.js at build time. */
.calib-exit {
    left: 5px; top: 2px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/exit_on.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: none; padding: 0; cursor: pointer;
}
.calib-exit:hover { background-image: url("../assets/Hemed/pictures/exit_down.png"); }
.calib-help {
    left: 740px; top: 2px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/help_on.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: none; padding: 0; cursor: pointer;
}
.calib-help:hover { background-image: url("../assets/Hemed/pictures/help_down.png"); }
/* Save button — not in original .frm; placed where CmdSave would mirror
   UnitEditorForm (72,8,55×55) using the same Save_off/Save_on assets. */
.calib-save {
    left: 72px; top: 8px; width: 55px; height: 55px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/Save_off.png");
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent; border: none; padding: 0; cursor: pointer;
}
.calib-save:hover {
    background-image: url("../assets/Hemed/pictures/UnitEditor/Save_on.png");
}
/* Description banner — original Form_Paint:
   "If CurrentI = GameList.Selected Then
        Me.FontSize = 16 / FixME
        DrawString Content(i + 2), Me.hdc, 400, 60, 0, vbCenter"
   16pt at 96 DPI ≈ 21 px, BLACK, horizontally centered, top at y=60.
   Game NAME is NOT drawn as a banner — only the description shows here. */
.calib-desc {
    left: 0; right: 0; top: 60px;
    text-align: center; pointer-events: none;
    color: rgb(0, 0, 0);
    font-family: "Arial", sans-serif; font-size: 21px;
}
/* GameList (424, 98, 257, 281) — ListPlus of the games. Each row colored
   by Disabled flag (red if disabled, green if enabled — per original
   GameList.AddItem RGB args). */
.calib-game-list {
    left: 424px; top: 98px; width: 257px; height: 281px;
    overflow-y: auto;
    background: rgba(255,253,235,0.85);
    border: 2px solid rgb(60, 30, 5);
    border-radius: 4px;
    padding: 4px;
    direction: rtl;
    scrollbar-width: thin;
}
.calib-game-row {
    padding: 6px 10px;
    font-size: 18px; font-weight: 700;
    color: rgb(0, 150, 0);
    cursor: pointer;
    border-bottom: 1px dotted rgba(60, 30, 5, 0.25);
    text-align: right;
}
.calib-game-row:hover    { background: rgba(184, 136, 64, 0.15); }
.calib-game-row.sel      { background: rgba(184, 136, 64, 0.35); }
.calib-game-row.disabled { color: rgb(200, 0, 0); }

/* CmdText (144,176,105,49) + CmdWave (264,176,105,49) — toggle buttons. */
.calib-cmd-text {
    left: 144px; top: 176px; width: 105px; height: 49px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/CalibOrder.jpg");
    background-size: 100% 100%; background-repeat: no-repeat;
    border: 2px solid transparent; padding: 0; cursor: pointer;
}
.calib-cmd-wave {
    left: 264px; top: 176px; width: 105px; height: 49px;
    background-image: url("../assets/Hemed/pictures/UnitEditor/CalibOrder2.jpg");
    background-size: 100% 100%; background-repeat: no-repeat;
    border: 2px solid transparent; padding: 0; cursor: pointer;
}
.stage.mode-text .calib-cmd-text,
.stage.mode-wave .calib-cmd-wave { border-color: rgb(180, 120, 30); }

/* Combo layer — all dropdowns are positioned inside this layer. Per-combo
   absolute positions are set inline on the wrap div based on .frm coords. */
.calib-combo-layer {
    left: 0; top: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.calib-combo-wrap {
    position: absolute;
    pointer-events: auto;
}
/* Caption above each combo — original Form_Paint:
     DrawString NextLine,  ..., ctl.Left + ctl.Width/2, ctl.Tag - 35, RGB(25,70,0), vbCenter
     DrawString FirstLine, ..., ctl.Left + ctl.Width/2, ctl.Tag - 16, RGB(25,70,0), vbCenter
   FontSize = 14 / FixME (~14-18 px). FirstLine = first word of label (sits
   on the BOTTOM line, closer to the combo). NextLine = remaining words
   (sits ABOVE FirstLine). Both centered horizontally over the combo. */
.calib-combo-line-top {
    position: absolute; left: 0; right: 0; top: -35px;
    text-align: center; color: rgb(25, 70, 0);
    font-family: "Arial", sans-serif; font-size: 14px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    direction: rtl;
}
.calib-combo-line-bot {
    position: absolute; left: 0; right: 0; top: -16px;
    text-align: center; color: rgb(25, 70, 0);
    font-family: "Arial", sans-serif; font-size: 14px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    direction: rtl;
}
.calib-combo {
    width: 100%; height: 34px;
    border: 2px solid rgb(60, 30, 5);
    border-radius: 4px;
    background: rgba(255,253,240,0.92);
    color: rgb(40, 25, 5);
    font-family: "Arial", sans-serif; font-size: 16px;
    direction: rtl; text-align: right;
    padding: 0 6px;
}
.calib-error {
    left: 100px; top: 250px; right: 100px;
    padding: 1.5rem; text-align: center;
    background: rgba(255,235,235,0.95);
    border: 2px solid rgb(180,50,50); border-radius: 8px;
    color: rgb(140,30,30); font-size: 1.05rem;
}