:root {
    --majom-ink: #233b27;
    --majom-muted: #64715d;
    --majom-leaf: #4f7f27;
    --majom-leaf-dark: #315719;
    --majom-sun: #f7c948;
    --majom-sky: #ddebfa;
    --majom-cream: #fffaf0;
    --majom-line: #dce5cf;
    --majom-danger: #b73a35;
    --majom-shadow: 0 18px 55px rgba(39, 65, 34, .16);
}

.majom-app,
.majom-app * { box-sizing: border-box; }

.majom-app {
    width: min(1680px, 100%);
    min-height: 720px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    color: var(--majom-ink);
    background: #edf4e6;
    box-shadow: var(--majom-shadow);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.majom-app [hidden] { display: none !important; }
.majom-app button,
.majom-app input,
.majom-app select { font: inherit; }

.majom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 88px;
    padding: 10px clamp(18px, 3vw, 44px);
    color: #fff;
    background: linear-gradient(112deg, #315b26, #628d2d 64%, #88a83c);
    box-shadow: 0 6px 24px rgba(33, 65, 25, .2);
}

.majom-brand { display: flex; align-items: center; gap: 14px; }
.majom-brand > img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(33, 45, 20, .25)); }
.majom-header h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 950; letter-spacing: -.04em; }
.majom-eyebrow { margin: 0 0 3px; color: #ffe07a; font-size: .73rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.majom-subtitle { margin: 3px 0 0; color: rgba(255,255,255,.86); font-size: .88rem; }
.majom-header__actions { display: flex; align-items: center; gap: 10px; }
.majom-sound,
.majom-logout { min-height: 43px; border: 1px solid rgba(255,255,255,.45); border-radius: 12px; color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.majom-sound { width: 46px; cursor: pointer; }
.majom-logout { display: inline-flex; align-items: center; padding: 8px 14px; font-weight: 800; }

.majom-layout {
    display: grid;
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
}

.majom-sidebar,
.majom-stage { min-width: 0; border: 1px solid var(--majom-line); border-radius: 20px; background: rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(39, 74, 34, .09); }
.majom-sidebar { align-self: start; padding: 20px; }
.majom-sidebar > label { display: block; margin-bottom: 7px; font-size: .8rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.majom-sidebar select { width: 100%; min-height: 45px; padding: 9px 11px; border: 1px solid #aebf9e; border-radius: 10px; color: var(--majom-ink); background: #fff; font-weight: 750; }
.majom-level-meta { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0 6px; color: var(--majom-leaf-dark); font-size: .78rem; font-weight: 850; }
.majom-sidebar > p { min-height: 44px; margin: 0 0 14px; color: var(--majom-muted); font-size: .87rem; line-height: 1.45; }

.majom-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 15px 0; }
.majom-stats div { padding: 10px 5px; border-radius: 11px; text-align: center; background: #f2f7ec; }
.majom-stats strong,
.majom-stats span { display: block; }
.majom-stats strong { color: var(--majom-leaf-dark); font-size: 1.35rem; }
.majom-stats span { margin-top: 2px; color: var(--majom-muted); font-size: .66rem; }

.majom-reset,
.majom-clear-progress,
.majom-builder-test,
.majom-builder-edit,
.majom-next { width: 100%; min-height: 43px; margin-top: 8px; border: 0; border-radius: 10px; font-weight: 850; cursor: pointer; }
.majom-reset,
.majom-builder-test,
.majom-next { color: #fff; background: var(--majom-leaf); }
.majom-clear-progress { color: #923a35; border: 1px solid #e9c2be; background: #fff8f7; }
.majom-builder-edit { color: #294f1e; border: 1px solid #b7cda7; background: #f5faef; }

.majom-stage { padding: 14px; overflow: hidden; background: linear-gradient(#fff, #f7fbf2); }
.majom-message { min-height: 44px; margin-bottom: 10px; padding: 11px 16px; border-radius: 12px; color: #36522c; background: #eef6e7; font-size: .91rem; font-weight: 800; text-align: center; }
.majom-message--ok { color: #17603a; background: #dff5df; }
.majom-message--error { color: #8f2e2b; background: #ffe7e4; }

.majom-board {
    --rows: 6;
    --cols: 8;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
    width: min(100%, calc(var(--cols) * 112px), calc(64vh * var(--cols) / var(--rows)));
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid #456f2d;
    border-radius: 18px;
    aspect-ratio: var(--cols) / var(--rows);
    background:
        linear-gradient(rgba(65, 113, 45, .08), rgba(52, 96, 37, .2)),
        var(--majom-background-image, url("../images/background-jungle.jpg")) center / cover no-repeat;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 12px 30px rgba(39, 79, 28, .2);
}

.majom-board::before {
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 47%;
    display: none;
    background: var(--majom-background-image, url("../images/background-jungle.jpg")) center top / cover no-repeat;
    content: "";
}

.majom-board::after {
    position: absolute;
    z-index: -1;
    inset: 41% 0 auto;
    height: 18%;
    display: none;
    background: linear-gradient(to bottom, transparent, rgba(105,149,54,.35) 75%);
    content: "";
}

.majom-cell { position: relative; min-width: 0; min-height: 0; border: 1px solid rgba(255,255,255,.075); }
.majom-board--editing .majom-cell { border-color: rgba(255,255,255,.26); cursor: crosshair; }
.majom-board--editing .majom-cell:hover { z-index: 20; outline: 3px solid #fff2a0; background: rgba(255,255,255,.18); }
.majom-tile,
.majom-rock,
.majom-goal,
.majom-banana,
.majom-monkey { position: absolute; left: 50%; pointer-events: none; user-select: none; }
.majom-tile,
.majom-rock { left: 0; bottom: 0; width: 100%; height: 100%; border-radius: clamp(6px, 10%, 12px); transform: none; }
.majom-tile { z-index: 2; padding: 3%; background: #d7bf77; object-fit: cover; filter: drop-shadow(0 4px 3px rgba(48, 68, 24, .24)); }
.majom-tile--bridge {
    top: 0;
    bottom: auto;
    width: 100%;
    height: 25%;
    padding: 0 2%;
    border-radius: 4px;
    background: transparent;
    object-fit: fill;
    filter: drop-shadow(0 4px 3px rgba(48, 68, 24, .3));
}
.majom-rock { z-index: 3; padding: 3%; background: #aeb4b1; object-fit: cover; filter: drop-shadow(0 4px 3px rgba(35, 45, 29, .24)); }
.majom-goal { z-index: 6; bottom: 17%; width: 76%; height: 70%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 5px 4px rgba(62, 44, 18, .3)); }
.majom-banana { z-index: 7; top: 4%; width: 47%; height: 47%; object-fit: contain; transform: translateX(-50%) rotate(-9deg); filter: drop-shadow(0 4px 2px rgba(83, 67, 11, .22)); animation: majom-banana-float 1.7s ease-in-out infinite alternate; }
.majom-monkey { z-index: 10; bottom: -5%; width: 88%; height: 104%; object-fit: contain; transform: translateX(-50%) scaleX(var(--monkey-flip, 1)) rotate(var(--monkey-angle, 0deg)); transform-origin: 50% 90%; filter: drop-shadow(0 6px 4px rgba(50, 40, 23, .3)); transition: transform .22s ease; }
.majom-cell:nth-child(4n + 1) .majom-tile:not(.majom-tile--ground) { filter: brightness(.97) saturate(.96) drop-shadow(0 4px 3px rgba(48, 68, 24, .24)); }
.majom-cell:nth-child(4n + 2) .majom-tile:not(.majom-tile--ground) { filter: brightness(1.04) saturate(1.02) drop-shadow(0 4px 3px rgba(48, 68, 24, .24)); }
.majom-cell:nth-child(4n + 3) .majom-tile:not(.majom-tile--ground) { filter: sepia(.06) brightness(1.01) drop-shadow(0 4px 3px rgba(48, 68, 24, .24)); }
.majom-cell:nth-child(3n + 1) .majom-rock { filter: brightness(.95) drop-shadow(0 4px 3px rgba(35, 45, 29, .24)); }
.majom-cell:nth-child(3n + 2) .majom-rock { filter: brightness(1.06) drop-shadow(0 4px 3px rgba(35, 45, 29, .24)); }
.majom-cell--ground { border-color: rgba(107, 82, 28, .26); }
.majom-tile--ground { padding: 2%; border-radius: clamp(7px, 12%, 14px); background: #dfc674; filter: none; }
.majom-cell--start::after { position: absolute; z-index: 4; right: 8%; bottom: 6%; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #2b8e5b; box-shadow: 0 2px 5px rgba(0,0,0,.25); content: ""; }

.majom-command-center { margin-top: 12px; padding: 13px; border: 1px solid #c7af7a; border-radius: 18px; background: linear-gradient(145deg, #fff9e8, #efe1bd); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.majom-program-wrap { position: relative; min-height: 86px; padding: 10px 12px; border: 2px dashed #a78d59; border-radius: 13px; background: rgba(255,255,255,.73); }
.majom-program-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #5e4a27; font-size: .76rem; }
.majom-program-heading strong { font-size: .86rem; }
.majom-history { display: flex; gap: 7px; min-height: 44px; overflow-x: auto; padding: 1px 2px 5px; }
.majom-program-empty { position: absolute; inset: 46px 12px auto; margin: 0; color: #8a7a5f; font-size: .78rem; text-align: center; }
.majom-program-step { flex: 0 0 42px; width: 42px; height: 42px; border: 2px solid #4d6f91; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #5c8fc0, #365f8d); box-shadow: 0 4px 0 #274866; font-size: 1.45rem; font-weight: 950; cursor: pointer; }
.majom-program-step:hover { transform: translateY(-1px); }
.majom-program-step.is-running { border-color: #fff1a8; background: linear-gradient(145deg, #f1b92d, #df8424); box-shadow: 0 0 0 4px rgba(255,214,94,.42); }
.majom-program-step.is-error { border-color: #ffb7ad; background: #b94039; box-shadow: 0 0 0 4px rgba(219,70,62,.25); }

.majom-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 13px; }
.majom-command { position: relative; display: grid; flex: 0 0 70px; place-items: center; width: 70px; height: 62px; padding: 3px; border: 3px solid #e8f5d8; border-radius: 18px 18px 15px 15px; color: #fff; background: linear-gradient(155deg, #6e9f35, #3e6f27); box-shadow: 0 6px 0 #2b501d, 0 8px 12px rgba(46,66,29,.22); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.majom-command--diagonal { background: linear-gradient(155deg, #d29337, #9a5d22); box-shadow: 0 6px 0 #704318, 0 8px 12px rgba(70,45,20,.22); }
.majom-command span { font-size: 2rem; font-weight: 950; line-height: 1; }
.majom-command small { position: absolute; right: 6px; bottom: 3px; color: rgba(255,255,255,.82); font-size: .58rem; font-weight: 900; }
.majom-command:hover { transform: translateY(-2px); }
.majom-command:active { transform: translateY(4px); box-shadow: 0 2px 0 #2b501d; }
.majom-command:disabled { opacity: .48; cursor: default; transform: none; }

.majom-program-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 13px; }
.majom-program-actions button { min-height: 43px; padding: 8px 15px; border-radius: 11px; font-weight: 850; cursor: pointer; }
.majom-secondary { color: #5b513c; border: 1px solid #c7b891; background: #fffdf7; }
.majom-run { min-width: 190px; color: #fff; border: 0; background: linear-gradient(145deg, #ef9d2e, #d76322); box-shadow: 0 5px 0 #a94218; }
.majom-stop { min-width: 160px; color: #fff; border: 0; background: #a93d38; box-shadow: 0 5px 0 #742825; }
.majom-program-actions button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.majom-key-hint { margin: 11px 0 0; color: #756849; font-size: .72rem; text-align: center; }

.majom-student-builder { margin: 14px 0; padding: 13px; border: 1px solid #c8dab8; border-radius: 14px; background: #f5faef; }
.majom-student-builder h2 { margin: 0 0 5px; font-size: 1rem; }
.majom-student-builder > p { min-height: 0; margin: 0 0 10px; font-size: .76rem; }
.majom-builder-size { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.majom-builder-size label { display: grid; gap: 4px; font-size: .72rem; font-weight: 800; }
.majom-builder-size input { width: 100%; min-height: 37px; padding: 6px 8px; border: 1px solid #afc39e; border-radius: 8px; }
.majom-builder-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 10px; }
.majom-builder-tools button { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 5px 7px; border: 1px solid #b9c9aa; border-radius: 9px; color: #3c5432; background: #fff; font-size: .7rem; font-weight: 800; cursor: pointer; }
.majom-builder-tools button.active { color: #fff; border-color: var(--majom-leaf); background: var(--majom-leaf); }
.majom-builder-tools img,
.majom-builder-tools span { width: 26px; height: 26px; object-fit: contain; }
.majom-builder-tools span { display: grid; place-items: center; }
.majom-builder-status { min-height: 32px; margin: 9px 0 0 !important; color: #536849 !important; font-size: .72rem !important; }

.majom-login,
.majom-closed { display: grid; min-height: 720px; place-items: center; align-content: center; padding: 40px 24px; text-align: center; background: linear-gradient(rgba(30,71,31,.3), rgba(25,61,28,.56)), var(--majom-background-image, url("../images/background-jungle.jpg")) center / cover no-repeat; }
.majom-login > *,
.majom-closed > * { width: min(500px, 100%); }
.majom-login__monkey,
.majom-closed > img { width: 118px; height: 118px; margin: 0 auto 6px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(31,42,19,.3)); }
.majom-login h1,
.majom-closed h1 { margin: 0; color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); text-shadow: 0 3px 8px rgba(27,48,20,.35); }
.majom-login > p:not(.majom-eyebrow),
.majom-closed > p:not(.majom-eyebrow) { color: #fff; font-weight: 700; line-height: 1.5; text-shadow: 0 2px 5px rgba(27,48,20,.4); }
.majom-login__form { display: grid; gap: 7px; padding: 23px; border-radius: 20px; text-align: left; background: rgba(255,255,255,.95); box-shadow: var(--majom-shadow); }
.majom-login__form label { font-weight: 850; }
.majom-password-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.majom-password-row input { min-width: 0; min-height: 46px; padding: 9px 11px; border: 1px solid #a8ba99; border-radius: 10px; }
.majom-password-row button { min-height: 46px; padding: 9px 18px; border: 0; border-radius: 10px; color: #fff; background: var(--majom-leaf); font-weight: 850; cursor: pointer; }
.majom-alert { padding: 14px; border-radius: 12px; background: #fff5cf; }

.majom-dialog { position: fixed; z-index: 100000; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(25,40,21,.72); }
.majom-dialog__panel { width: min(460px, 100%); padding: 31px; border-radius: 24px; text-align: center; background: #fffdf6; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.majom-dialog__panel > img { width: 120px; height: 95px; object-fit: contain; }
.majom-dialog h2 { margin: 4px 0 8px; font-size: 2rem; }
.majom-stars { margin: 16px 0; color: #f0ae28; font-size: 2rem; letter-spacing: .1em; }
.majom-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.majom-confetti { position: fixed; top: -18px; width: 9px; height: 14px; animation: majom-confetti-fall 1.8s ease-in forwards; }
.majom-modal-open { overflow: hidden; }

.majom-board--shake { animation: majom-shake .28s linear; }
@keyframes majom-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes majom-banana-float { from { transform: translateX(-50%) translateY(0) rotate(-9deg); } to { transform: translateX(-50%) translateY(-6px) rotate(5deg); } }
@keyframes majom-confetti-fall { to { transform: translate(var(--drift), 105vh) rotate(720deg); } }

@media (max-width: 1050px) {
    .majom-layout { grid-template-columns: 1fr; }
    .majom-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; }
    .majom-sidebar > label,
    .majom-sidebar > select,
    .majom-level-meta,
    .majom-sidebar > p,
    .majom-student-builder { grid-column: 1 / -1; }
    .majom-stats { margin: 0; }
    .majom-reset,
    .majom-clear-progress { margin: 0; }
}

@media (max-width: 720px) {
    .majom-app { border-radius: 0; }
    .majom-header { align-items: flex-start; padding: 10px 14px; }
    .majom-brand > img { width: 56px; height: 56px; }
    .majom-subtitle { display: none; }
    .majom-layout { padding: 9px; }
    .majom-sidebar,
    .majom-stage { border-radius: 14px; }
    .majom-sidebar { grid-template-columns: 1fr; }
    .majom-sidebar > *,
    .majom-stats,
    .majom-reset,
    .majom-clear-progress { grid-column: 1; }
    .majom-board { max-height: none; width: 100%; }
    .majom-command { flex-basis: 58px; width: 58px; height: 54px; border-radius: 15px; }
    .majom-command span { font-size: 1.7rem; }
    .majom-program-actions button { flex: 1 1 135px; }
}

@media (max-width: 440px) {
    .majom-header h1 { font-size: 1.38rem; }
    .majom-eyebrow { font-size: .62rem; }
    .majom-stage { padding: 8px; }
    .majom-message { font-size: .78rem; }
    .majom-command-center { padding: 8px; }
    .majom-controls { gap: 6px; }
    .majom-command { flex-basis: 51px; width: 51px; height: 49px; border-width: 2px; }
    .majom-program-step { flex-basis: 38px; width: 38px; height: 38px; }
    .majom-builder-tools { grid-template-columns: 1fr; }
}