.balance-page,.balance-page *{box-sizing:border-box;user-select:none;-webkit-user-select:none}.balance-page{--balance-accent: var(--purple-primary);--balance-success: var(--green-base);--balance-danger: var(--red-base);position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;width:100%;max-width:var(--max-width);margin-inline:auto;height:calc(100vh - 56px);height:calc(100dvh - 56px);min-height:min(580px,calc(100dvh - 56px));overflow:hidden;background:var(--bg-color);color:var(--text-color);font-family:Patrick Hand,cursive,sans-serif}body:has(.balance-page){margin-bottom:0}.balance-page button,.balance-page select{color:inherit;font:inherit}.balance-page button{cursor:pointer}.game-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .75rem}.glass-panel{color:var(--text-color);background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--border-corners);box-shadow:3px 4px 0 var(--shadow-color)}.equation-card{display:flex;align-items:center;justify-content:space-between;gap:.65rem;padding:.45rem .75rem;pointer-events:auto}.side-heading,.operation-heading{display:block;color:var(--balance-accent);font-size:.85rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.audio-toggle,.btn-action{min-height:2.25rem;border:2px solid var(--border-color);border-radius:var(--border-corners);background:var(--bg-card);color:var(--text-color);transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.audio-toggle{display:inline-grid;min-width:2.4rem;place-items:center;padding:.35rem .6rem}.level-navigation{display:flex;align-items:center;justify-content:center;gap:.5rem;width:fit-content;max-width:100%;margin:0 auto;padding:.35rem}.level-select{min-width:0;max-width:min(75vw,25rem);padding:.35rem .55rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-color);font:inherit;cursor:pointer}.btn-action:hover:not(:disabled),.audio-toggle:hover{transform:translateY(-2px);border-color:var(--balance-accent);box-shadow:2px 3px 0 var(--shadow-color)}.btn-action:active:not(:disabled),.audio-toggle:active{transform:translateY(1px);box-shadow:none}.btn-action:disabled{opacity:.45;cursor:not-allowed}.equation-card{justify-content:center;width:fit-content;max-width:100%;padding:.45rem 1rem;transition:border-color .25s ease,box-shadow .25s ease}.equation-row{z-index:10;display:flex;justify-content:center;padding:.15rem .75rem .5rem}.equation-display{display:flex;align-items:center;gap:.4rem;font-size:1.45rem;font-weight:700}.equation-value,.equation-sign{color:var(--balance-success)}.equation-sign{margin:0 .15rem}.equation-value.is-unbalanced,.equation-sign.is-unbalanced,.status-tag.is-unbalanced{color:var(--balance-danger)}.status-tag{padding:.2rem .6rem;border:1px solid color-mix(in srgb,var(--balance-success) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--balance-success) 12%,var(--bg-card));color:var(--balance-success);font-size:.75rem;font-weight:700;text-transform:uppercase}.status-tag.is-unbalanced{border-color:color-mix(in srgb,var(--balance-danger) 45%,transparent);background:color-mix(in srgb,var(--balance-danger) 12%,var(--bg-card))}.glow-balanced{border-color:var(--balance-success)}.glow-unbalanced{border-color:var(--balance-danger)}#canvas-wrapper{position:relative;min-height:0;width:100%;height:100%;overflow:hidden}#balanceCanvas{position:absolute;inset:0;display:block;width:100%;height:100%}.toast{position:fixed;z-index:50;top:6rem;left:50%;max-width:calc(100vw - 2rem);padding:.6rem 1.1rem;transform:translate(-50%,-.75rem);border:2px solid var(--yellow-base);border-radius:var(--border-corners);background:var(--bg-card);color:var(--yellow-base);box-shadow:3px 4px 0 var(--shadow-color);font-size:.9rem;font-weight:700;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility .25s ease}.toast.is-visible{transform:translate(-50%);opacity:1;visibility:visible}.control-layout{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.6rem;padding:.5rem}.side-panel{--panel-accent: var(--purple-primary);display:flex;flex-direction:column;gap:.4rem;min-width:0;width:auto;padding:.55rem;border-left:4px solid var(--panel-accent)}.side-panel-right{--panel-accent: var(--teal-base);border-right:4px solid var(--panel-accent);border-left:2px solid var(--border-color)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.side-heading{display:inline-flex;align-items:center;gap:.2rem;color:var(--panel-accent);font-size:.8rem}.force-badge{padding:.1rem .5rem;border:1px solid var(--border-color);border-radius:999px;background:var(--bg-color);color:var(--text-muted);font-size:.75rem;font-weight:700;white-space:nowrap}.force-badge{border-color:color-mix(in srgb,var(--panel-accent) 45%,var(--border-color));color:var(--panel-accent)}.operation-control{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.5rem}.control-label{color:var(--text-muted);font-size:.85rem;font-weight:700;white-space:nowrap}.operation-actions{display:flex;align-items:center;gap:.35rem;min-width:0}.factor-select{min-width:0;min-height:2.1rem;padding:.25rem .4rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-color);font-family:inherit;font-size:.9rem}.item-steppers{display:grid;gap:.2rem}.item-stepper{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem;min-width:0;padding:.15rem 0;border-bottom:1px solid var(--border-color)}.step-weight{--stepper-accent: var(--yellow-base)}.step-balloon{--stepper-accent: var(--red-base)}.step-unknown{--stepper-accent: var(--purple-primary)}.stepper-label{display:inline-flex;align-items:center;gap:.3rem;min-width:0;color:var(--stepper-accent);font-weight:700;white-space:nowrap}.stepper-label small{font-size:.75rem}.stepper-label .material-symbols-rounded{font-size:1.15rem}.stepper-controls{display:inline-flex;align-items:center;gap:.15rem}.stepper-button{display:grid;min-width:1.85rem;min-height:1.85rem;place-items:center;padding:0;border:1px solid var(--border-color);border-radius:7px;background:var(--bg-card);color:var(--stepper-accent)}.stepper-button .material-symbols-rounded{font-size:1.1rem}.stepper-count{min-width:1.35rem;color:var(--text-color);font-weight:700;text-align:center}.factor-select{width:3.1rem;text-align:center}.operation-button{min-width:2.3rem;min-height:2.1rem;padding:.2rem .55rem;border-color:var(--panel-accent);color:var(--panel-accent);font-size:1rem;font-weight:700}.center-actions{display:flex;align-self:center;justify-content:center;gap:.5rem;padding:.35rem}.secondary-button,.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.5rem;padding:.45rem .8rem;font-size:.85rem;font-weight:700;line-height:1;white-space:nowrap}.secondary-button .material-symbols-rounded,.primary-button .material-symbols-rounded{display:inline-flex;align-items:center;font-size:1.15rem;line-height:1}.primary-button{border-color:var(--purple-primary);background:var(--purple-primary);color:#fff}.primary-button:hover:not(:disabled){background:color-mix(in srgb,var(--purple-primary) 86%,var(--text-color));color:#fff}.modal-overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:1rem;background:color-mix(in srgb,var(--text-color) 55%,transparent);backdrop-filter:blur(5px);opacity:1;visibility:visible;transition:opacity .25s ease,visibility .25s ease}.modal-overlay.hidden-modal{opacity:0;visibility:hidden;pointer-events:none}.modal-dialog{position:relative;width:min(100%,28rem);padding:1.4rem;text-align:center;transition:transform .25s ease}.hidden-modal .modal-dialog{transform:scale(.96) translateY(.75rem)}.modal-icon{margin-bottom:.5rem;font-size:2.7rem}.modal-title{margin-bottom:.5rem;color:var(--text-color);font-size:1.6rem}.modal-description{margin-bottom:1.2rem;color:var(--text-muted);font-size:1rem;line-height:1.35}.modal-actions{display:flex;justify-content:center;gap:.6rem}.is-hidden{display:none!important}.balance-page :focus-visible{outline:3px solid var(--purple-primary);outline-offset:2px}@media(min-width:850px){.control-layout{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:.65rem .75rem}}@media(max-width:849px){.control-layout{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.side-panel-left{grid-column:1;grid-row:1}.side-panel-right{grid-column:2;grid-row:1}.center-actions{grid-column:1 / -1;grid-row:2}.side-panel{gap:.3rem;padding:.4rem}.operation-control{grid-template-columns:1fr;gap:.15rem}.stepper-label{gap:.15rem;font-size:.75rem}.stepper-label .material-symbols-rounded{font-size:1rem}.stepper-button{min-width:1.6rem;min-height:1.6rem}.stepper-count{min-width:1.1rem;font-size:.8rem}.control-label{font-size:.75rem}}@media(max-width:520px){.game-header{flex-wrap:wrap;padding:.4rem;gap:.35rem}.level-select{max-width:calc(100vw - 7rem);font-size:.85rem}.equation-card{gap:.35rem;padding:.25rem .7rem}.equation-display{font-size:1.2rem}.status-tag{display:none}.control-layout{gap:.35rem;padding:.35rem}.side-heading{font-size:.7rem}.force-badge{padding:.1rem .35rem;font-size:.68rem}.operation-actions{gap:.25rem}.operation-button,.factor-select{min-height:1.9rem}.secondary-button,.primary-button{padding:.4rem .65rem;font-size:.8rem}.modal-dialog{padding:1rem}}
