.shil-equation-balance {
    --eq-blue: #1557b8;
    --eq-deep: #123663;
    --eq-cyan: #4ea9e9;
    --eq-green: #169b67;
    --eq-green-deep: #08784c;
    --eq-orange: #ff9b3d;
    --eq-line: #b9d7f2;
    color: var(--eq-deep);
}

.shil-eq-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 1px solid #d8e8f7;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(31, 76, 125, .07);
}

.shil-eq-mission { display:flex; align-items:center; gap:10px; min-width:0; }
.shil-eq-mission__icon { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border-radius:12px; background:#eaf5ff; color:var(--eq-blue); font-size:1.15rem; font-weight:900; }
.shil-eq-mission > div { display:grid; gap:1px; min-width:0; }
.shil-eq-mission small { color:#7890a9; font-size:.72rem; font-weight:800; }
.shil-eq-mission strong { color:#173e67; font-size:.91rem; line-height:1.7; }

.shil-eq-toolbar__status { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.shil-eq-resume { padding:6px 9px; border:1px solid #c7ead8; border-radius:999px; background:#effbf5; color:#14724d; font-size:.7rem; font-weight:900; white-space:nowrap; }
.shil-eq-progress { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:999px; background:#eef6ff; color:var(--eq-blue); font-size:.78rem; font-weight:900; white-space:nowrap; }
.shil-eq-progress__track { display:flex; gap:4px; direction:ltr; }
.shil-eq-progress__track i { width:18px; height:5px; border-radius:999px; background:#cfe2f6; transition:background .18s ease, transform .18s ease; }
.shil-eq-progress__track i.is-current { background:#79b9ed; transform:scaleX(1.08); }
.shil-eq-progress__track i.is-done { background:var(--eq-green); }

.shil-eq-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 1680 / 896;
    overflow: hidden;
    border: 1px solid #cfe2f5;
    border-radius: 22px;
    background: #dceeff url('../images/equation-balance-scene.png') center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 14px 36px rgba(27, 76, 124, .12);
    touch-action: none;
}

.shil-eq-board {
    position: absolute;
    top: 11.5%;
    left: 33%;
    width: 34%;
    min-height: 16%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 7px 14px;
    border: 1px solid rgba(118,184,237,.35);
    border-radius: 19px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 28px rgba(48, 101, 157, .12);
    backdrop-filter: blur(4px);
}

.shil-eq-board > span { display:block; max-width:100%; direction:ltr; white-space:nowrap; font:900 clamp(1.5rem,3.2vw,2.9rem)/1.1 Tahoma,Arial,sans-serif; color:#1f578f; letter-spacing:.02em; }
.shil-eq-board small { color:#718aa3; font-size:.72rem; font-weight:800; }
.shil-eq-x { color:#f08b2e; }

.shil-eq-side {
    position:absolute;
    bottom:4.7%;
    width:30.5%;
    height:27%;
    display:grid;
    grid-template-columns:repeat(6,26px);
    grid-auto-rows:52px;
    align-items:center;
    align-content:center;
    justify-content:center;
    justify-items:center;
    gap:8px 0;
    padding:8px;
    border:1px solid transparent;
    border-radius:18px;
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.shil-eq-side.has-selection { border-color:rgba(255,155,61,.48); background:rgba(255,248,239,.62); box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); }
.shil-eq-side--left { left:2.4%; }
.shil-eq-side--right { right:2.4%; }

/* Desktop: deterministic 3+2 layout. Keeps every tile inside the visual tray. */
.shil-shell .shil-eq-side .shil-eq-tile {
    grid-column:span 2;
    width:52px;
    min-width:52px;
    height:52px;
    min-height:52px;
}
.shil-shell .shil-eq-side .shil-eq-tile:nth-child(4) { grid-column:2 / span 2; }
.shil-shell .shil-eq-side .shil-eq-tile:nth-child(5) { grid-column:4 / span 2; }

.shil-shell .shil-eq-tile {
    width:clamp(44px,6vw,68px);
    min-width:44px;
    height:clamp(44px,6vw,68px);
    min-height:44px;
    flex:0 0 auto;
    margin:0 !important;
    padding:0;
    border:2px solid #76b8ed;
    border-radius:16px;
    background:linear-gradient(180deg,#fff,#dff1ff);
    color:#174b82!important;
    font:900 clamp(1.25rem,3vw,2rem)/1 Tahoma,Arial,sans-serif;
    box-shadow:0 7px 14px rgba(29,90,145,.16);
    cursor:grab;
    user-select:none;
    touch-action:none;
    transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease,border-color .15s ease;
}
.shil-shell .shil-eq-tile:active { cursor:grabbing; transform:scale(.97); }
.shil-shell .shil-eq-tile:hover { transform:translateY(-2px); filter:none; }
.shil-shell .shil-eq-tile.is-selected { border-color:var(--eq-orange); box-shadow:0 0 0 4px rgba(255,155,61,.25),0 8px 16px rgba(29,90,145,.14); transform:translateY(-3px); }
.shil-shell .shil-eq-tile.is-used { opacity:.16; transform:scale(.86); box-shadow:none; }
.shil-shell .shil-eq-tile--x { border-color:#ffb160; background:linear-gradient(180deg,#fff3df,#ffd896); color:#8a4c00!important; }
.shil-shell .shil-eq-tile.is-fixed { cursor:not-allowed; opacity:1; }

.shil-eq-drop {
    position:absolute;
    left:40.5%;
    bottom:4.7%;
    width:19%;
    min-height:23%;
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    padding:10px;
    border:2px dashed #4e9dde;
    border-radius:18px;
    background:rgba(247,252,255,.93);
    color:#285c8f;
    text-align:center;
    box-shadow:0 8px 20px rgba(34,96,148,.12);
    transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.shil-equation-balance.is-dragging .shil-eq-drop { border-color:#298bd5; box-shadow:0 0 0 5px rgba(78,157,222,.13),0 10px 24px rgba(34,96,148,.14); }
.shil-eq-drop.is-ready { border-style:solid; border-color:var(--eq-green); background:rgba(237,255,247,.96); transform:translateY(-2px); box-shadow:0 0 0 5px rgba(22,155,103,.12),0 10px 24px rgba(34,96,148,.12); }
.shil-eq-drop.is-complete { border-style:solid; border-color:var(--eq-green); background:rgba(230,253,242,.97); }
.shil-eq-drop__icon { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:#e4f3ff; color:#16599a; font-weight:900; direction:ltr; }
.shil-eq-drop strong { font-size:clamp(.78rem,1.5vw,1rem); }
.shil-eq-drop small { max-width:170px; color:#63809b; font-size:clamp(.62rem,1.2vw,.8rem); line-height:1.55; }
.shil-eq-drop__slots { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:5px; font-size:.7rem; font-weight:900; }
.shil-eq-drop__slots span { min-width:58px; padding:4px 6px; border-radius:9px; background:#edf5fc; color:#5a7896; }
.shil-eq-drop__slots span.is-filled { background:#dff7eb; color:#0f7a4d; }

.shil-eq-controls { display:grid; grid-template-columns:minmax(210px,1fr) auto; gap:10px; margin-top:12px; }
.shil-eq-controls__secondary { display:flex; gap:8px; }
.shil-shell .shil-eq-action,.shil-shell .shil-eq-secondary { min-height:46px; border-radius:13px; font-weight:900; }
.shil-shell .shil-eq-action { display:flex; align-items:center; justify-content:center; gap:12px; background:linear-gradient(135deg,var(--eq-green),#27bd80); border-color:var(--eq-green); box-shadow:0 9px 20px rgba(22,155,103,.20); }
.shil-shell .shil-eq-action:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(22,155,103,.25); }
.shil-shell .shil-eq-action:disabled { box-shadow:none; opacity:.48; }
.shil-shell .shil-eq-secondary { min-width:112px; background:#fff; border-color:#c9dbee; color:#315576!important; }

.shil-eq-feedback {
    display:flex;
    align-items:flex-start;
    gap:9px;
    min-height:48px;
    margin-top:10px;
    padding:11px 13px;
    border:1px solid #dce9f6;
    border-radius:13px;
    background:#f5f9fe;
    color:#355c80;
    line-height:1.75;
}
.shil-eq-feedback__icon { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; margin-top:1px; border-radius:50%; background:#ddecfb; color:#2d6ca5; font-weight:900; }
.shil-eq-feedback.is-success { border-color:#ccebdc; background:#f0fbf6; color:#146542; }
.shil-eq-feedback.is-success .shil-eq-feedback__icon { background:#d5f4e4; color:#0b7a4b; }
.shil-eq-feedback.is-error { border-color:#f2d0d0; background:#fff5f5; color:#9f3232; }
.shil-eq-feedback.is-error .shil-eq-feedback__icon { background:#ffe1e1; color:#b42323; }
.shil-eq-feedback.is-saving { border-color:#d7e3ef; background:#f7fafc; color:#5b7085; }
.shil-eq-feedback.is-saving .shil-eq-feedback__icon { background:#e6eef5; color:#4d6981; }

.shil-eq-success { display:flex; align-items:center; gap:13px; margin-top:12px; padding:14px 16px; border:1px solid #bfe7d3; border-radius:16px; background:linear-gradient(135deg,#edfbf4,#f8fffb); color:#105e3e; box-shadow:0 10px 24px rgba(22,155,103,.10); }
.shil-eq-success__check { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border-radius:50%; background:var(--eq-green); color:#fff; font-size:1.35rem; font-weight:900; box-shadow:0 6px 16px rgba(22,155,103,.22); }
.shil-eq-success > div { display:grid; gap:1px; }
.shil-eq-success small { color:#478269; font-size:.72rem; font-weight:900; }
.shil-eq-success strong { color:#0b6b45; font-size:1.05rem; }
.shil-eq-success span:not(.shil-eq-success__check) { color:#527766; font-size:.76rem; font-weight:800; }
.shil-equation-balance.is-completed .shil-eq-controls { display:none; }

.shil-eq-drag-ghost { position:fixed!important; z-index:2147483000!important; transform:translate(-50%,-50%) scale(1.04)!important; pointer-events:none!important; opacity:.9!important; margin:0!important; }

@media (max-width: 680px) {
    .shil-eq-toolbar { align-items:stretch; flex-direction:column; gap:8px; padding:10px 11px; }
    .shil-eq-toolbar__status { justify-content:space-between; width:100%; }
    .shil-eq-mission__icon { width:32px; height:32px; flex-basis:32px; border-radius:10px; }
    .shil-eq-mission strong { font-size:.82rem; }
    .shil-eq-resume { font-size:.62rem; }
    .shil-eq-progress { margin-inline-start:auto; padding:6px 9px; font-size:.7rem; }
    .shil-eq-scene { min-height:390px; aspect-ratio:auto; background-position:center top; background-size:auto 100%; border-radius:18px; }
    .shil-eq-board { top:7%; left:21%; width:58%; min-height:14%; border-radius:14px; }
    .shil-eq-side { bottom:5.8%; display:flex; width:34%; height:29%; padding:7px 5px; gap:4px; background:rgba(255,255,255,.64); border-radius:14px; }
    .shil-eq-side--left { left:1.2%; }
    .shil-eq-side--right { right:1.2%; }
    .shil-eq-drop { left:35.5%; bottom:4%; width:29%; min-height:29%; padding:7px 4px; border-radius:14px; }
    .shil-eq-drop__icon { width:34px; height:34px; }
    .shil-eq-drop small { display:none; }
    .shil-eq-drop__slots { gap:3px; font-size:.61rem; }
    .shil-eq-drop__slots span { min-width:46px; padding:3px; }
    .shil-shell .shil-eq-side .shil-eq-tile { width:40px; min-width:40px; height:40px; min-height:40px; border-radius:11px; }
    .shil-eq-controls { grid-template-columns:1fr; gap:8px; }
    .shil-eq-controls__secondary { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .shil-shell .shil-eq-secondary { min-width:0; min-height:42px; font-size:.76rem; }
    .shil-eq-feedback { margin-top:8px; padding:9px 10px; font-size:.76rem; border-radius:12px; }
    .shil-eq-success { padding:11px 12px; border-radius:14px; }
    .shil-eq-success__check { width:38px; height:38px; flex-basis:38px; }
}

@media (max-width: 420px) {
    .shil-eq-scene { min-height:365px; }
    .shil-eq-board > span { font-size:1.55rem; }
    .shil-shell .shil-eq-side .shil-eq-tile { width:36px; min-width:36px; height:36px; min-height:36px; font-size:1.12rem; }
    .shil-eq-drop strong { font-size:.72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .shil-eq-drop,.shil-shell .shil-eq-tile,.shil-eq-progress__track i,.shil-shell .shil-eq-action { transition:none!important; }
}

/* Engine 1.3: compact token layout for larger config-driven equations. */
.shil-equation-balance.is-dense .shil-eq-side {
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:7px;
}
.shil-equation-balance.is-dense .shil-eq-side .shil-eq-tile,
.shil-shell .shil-equation-balance.is-dense .shil-eq-side .shil-eq-tile:nth-child(n) {
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
    grid-column:auto;
    border-radius:12px;
    font-size:1.2rem;
}
@media (max-width:680px) {
    .shil-equation-balance.is-dense .shil-eq-side { gap:3px; padding:5px 3px; }
    .shil-equation-balance.is-dense .shil-eq-side .shil-eq-tile,
    .shil-shell .shil-equation-balance.is-dense .shil-eq-side .shil-eq-tile:nth-child(n) {
        width:27px;
        min-width:27px;
        height:27px;
        min-height:27px;
        border-width:1px;
        border-radius:8px;
        font-size:.88rem;
        box-shadow:0 4px 8px rgba(29,90,145,.13);
    }
}
@media (max-width:420px) {
    .shil-equation-balance.is-dense .shil-eq-side .shil-eq-tile,
    .shil-shell .shil-equation-balance.is-dense .shil-eq-side .shil-eq-tile:nth-child(n) {
        width:24px;
        min-width:24px;
        height:24px;
        min-height:24px;
        font-size:.8rem;
    }
}

/* Engine 1.3: multi-challenge game loop. */
.shil-eq-challenge,
.shil-eq-points {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 9px;
    border-radius:999px;
    white-space:nowrap;
    font-size:.7rem;
    font-weight:900;
}
.shil-eq-challenge { background:#eef1ff; color:#4056a8; border:1px solid #d8def8; }
.shil-eq-points { background:#fff6df; color:#8a5a00; border:1px solid #f2dfae; }
@media (max-width:680px) {
    .shil-eq-toolbar__status { flex-wrap:wrap; }
    .shil-eq-challenge,.shil-eq-points { min-height:27px; padding:5px 8px; font-size:.62rem; }
}


/* Engine 1.4: game UX, difficulty progression, streak and multi-select. */
.shil-eq-difficulty,
.shil-eq-streak {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 9px;
    border-radius:999px;
    white-space:nowrap;
    font-size:.7rem;
    font-weight:900;
}
.shil-eq-difficulty.is-easy { background:#e9fbf2; color:#0f7a4d; border:1px solid #c7ecd9; }
.shil-eq-difficulty.is-medium { background:#fff6df; color:#8a5a00; border:1px solid #f2dfae; }
.shil-eq-difficulty.is-hard { background:#fff0f0; color:#a33a3a; border:1px solid #efcaca; }
.shil-eq-streak { background:#fff0e1; color:#a85100; border:1px solid #f5d1a8; }

.shil-eq-drop.is-mismatch {
    border-color:#e5a1a1;
    background:rgba(255,247,247,.97);
    box-shadow:0 0 0 4px rgba(194,64,64,.08);
}
.shil-eq-drop__slots span.is-mismatch {
    background:#fff0f0;
    color:#9f3232;
}
.shil-equation-balance[data-difficulty="hard"] .shil-eq-board {
    box-shadow:0 9px 26px rgba(168,74,74,.14);
}
.shil-equation-balance[data-difficulty="easy"] .shil-eq-board {
    box-shadow:0 9px 26px rgba(22,155,103,.10);
}

.shil-eq-success__body { min-width:0; width:100%; }
.shil-eq-result-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:8px;
}
.shil-eq-result-grid > span {
    display:grid;
    gap:2px;
    min-height:54px;
    padding:8px 10px;
    border:1px solid #d7eadf;
    border-radius:12px;
    background:rgba(255,255,255,.74);
}
.shil-eq-result-grid small {
    color:#668173;
    font-size:.66rem;
    font-weight:800;
}
.shil-eq-result-grid strong {
    color:#135e42;
    font-size:.86rem;
    line-height:1.55;
}
@media (max-width:680px) {
    .shil-eq-difficulty,.shil-eq-streak { min-height:27px; padding:5px 8px; font-size:.62rem; }
    .shil-eq-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
    .shil-eq-result-grid > span { min-height:48px; padding:7px 8px; }
}
@media (max-width:420px) {
    .shil-eq-result-grid { grid-template-columns:1fr 1fr; }
}


/* Engine 1.4.1: semantic progress + verified challenge transition. */
.shil-eq-progress[data-kind="units"] { background:#eefbf6; color:#11734d; }
.shil-eq-progress[data-kind="units"] .shil-eq-progress__track i.is-current { background:#79c8a7; }

.shil-eq-transition {
    position:absolute;
    inset:0;
    z-index:20;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(239,251,246,.68);
    backdrop-filter:blur(3px);
    animation:shil-eq-transition-fade .18s ease-out both;
}
.shil-eq-transition[hidden] { display:none!important; }
.shil-eq-transition__card {
    display:grid;
    min-width:min(340px,88%);
    max-width:440px;
    place-items:center;
    gap:5px;
    padding:18px 24px;
    border:1px solid #bfe7d3;
    border-radius:20px;
    background:rgba(255,255,255,.96);
    color:#105e3e;
    text-align:center;
    box-shadow:0 18px 42px rgba(16,94,62,.16);
    animation:shil-eq-transition-pop .22s ease-out both;
}
.shil-eq-transition__check {
    display:grid;
    width:48px;
    height:48px;
    place-items:center;
    margin-bottom:2px;
    border-radius:50%;
    background:var(--eq-green);
    color:#fff;
    font-size:1.45rem;
    font-weight:900;
    box-shadow:0 8px 18px rgba(22,155,103,.24);
}
.shil-eq-transition__card small { color:#4d8a70; font-size:.7rem; font-weight:900; }
.shil-eq-transition__card strong { color:#0b6b45; font-size:1.12rem; }
.shil-eq-transition__card > span:last-child { color:#527766; font-size:.8rem; font-weight:800; }
.shil-equation-balance.is-transitioning .shil-eq-controls { pointer-events:none; opacity:.72; }
@keyframes shil-eq-transition-fade { from { opacity:0; } to { opacity:1; } }
@keyframes shil-eq-transition-pop { from { opacity:0; transform:translateY(7px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:680px) {
    .shil-eq-transition__card { min-width:min(290px,92%); padding:14px 16px; border-radius:16px; }
    .shil-eq-transition__check { width:42px; height:42px; font-size:1.25rem; }
    .shil-eq-transition__card strong { font-size:.95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .shil-eq-transition,.shil-eq-transition__card { animation:none!important; }
}


/* Engine 1.5: equation families (subtraction, commutative addition, multiplication). */
.shil-shell .shil-eq-tile--negative {
    border-color:#e99a9a;
    background:linear-gradient(180deg,#fff8f8,#ffe1e1);
    color:#a43b3b!important;
}
.shil-shell .shil-eq-tile--added {
    border-color:#76caa5;
    background:linear-gradient(180deg,#f5fff9,#dff6ea);
    color:#0d774b!important;
    opacity:1;
}
.shil-equation-balance[data-operation="add_equal"] .shil-eq-drop {
    border-color:#6fb99a;
    background:rgba(244,255,249,.95);
}
.shil-equation-balance[data-operation="divide_equal"] .shil-eq-drop {
    border-color:#8a8fd6;
    background:rgba(248,248,255,.96);
}
.shil-eq-divisors {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:5px;
    margin-top:4px;
}
.shil-eq-divisors[hidden] { display:none!important; }
/* Author display rules must never reveal hidden results or controls. */
.shil-equation-balance [hidden] { display:none!important; }
.shil-shell .shil-eq-divisor {
    min-width:44px;
    min-height:34px;
    margin:0!important;
    padding:5px 9px;
    border:1px solid #bdc8e8;
    border-radius:10px;
    background:#fff;
    color:#435a94!important;
    font-weight:900;
    box-shadow:none;
}
.shil-shell .shil-eq-divisor.is-selected {
    border-color:#5d69bf;
    background:#e9ebff;
    box-shadow:0 0 0 3px rgba(93,105,191,.12);
}
.shil-equation-balance[data-family="ax_equals_b"] .shil-eq-side--left .shil-eq-tile--x {
    background:linear-gradient(180deg,#fff3df,#ffd896);
}
@media (max-width:680px) {
    .shil-shell .shil-eq-divisor { min-width:38px; min-height:30px; padding:4px 7px; font-size:.72rem; }
    .shil-eq-divisors { gap:3px; }
}