/* Sum Tower. Layout only; the tower and the number pad are drawn in markup (kids-tower-core.js). */
.tw-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.tw-stage>*{min-width:0}
.tw-levels{margin-top:4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;border-radius:20px;box-sizing:border-box}
.tw-levels button{min-width:0;white-space:normal;border-radius:15px;padding:8px 6px}

.tw-card{display:grid;justify-items:center;gap:2px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.08);text-align:center}
.tw-op{margin:0;font-size:2.4rem;font-weight:900;line-height:1;color:#ffd54f;min-height:1em}
.tw-card p:last-child{margin:0;font-weight:700}

/* The tower is drawn in SVG and scales with the page; it never gets wider than 360px. */
.tw-tower{display:flex;justify-content:center;width:100%;margin:0 auto}
.tw-svg{display:block;width:min(100%,360px);height:auto;overflow:visible}
.tw-box{stroke-width:3}
.tw-base{fill:#ffcc80;stroke:#e65100}
.tw-empty{fill:rgba(255,255,255,.08);stroke:#90a4ae;stroke-dasharray:8 6}
.tw-solved{fill:#a5d6a7;stroke:#2e7d32}
.tw-src{stroke:#ffd54f;stroke-width:6}
.tw-active{stroke:#ffd54f;stroke-width:6;stroke-dasharray:none}
.tw-val{fill:#0d1b2a;font-size:28px;font-weight:900;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.tw-val.tw-q{fill:#ffffff}

/* A row of number buttons; the grid wraps onto more rows on a phone, so no page scroll. */
.tw-pad{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:8px;max-width:520px;width:100%;margin:0 auto}
.tw-num{min-height:50px;padding:0;border:3px solid #ffb300;border-radius:16px;background:#263f7a;color:#fff;font:inherit;font-weight:900;font-size:1.2rem;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,box-shadow .15s ease}
.tw-num:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.tw-num:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.tw-num.tw-shake{animation:tw-shake .45s ease}

.tw-trail{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;min-height:30px}
.tw-trail li{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:700}

.tw-actions{justify-content:center}
.tw-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tw-win:focus{outline:none}
.tw-howto{margin-top:28px}
.tw-steps{display:grid;gap:8px;padding-left:1.2em}

@keyframes tw-shake{
 0%,100%{transform:translateX(0)}
 20%{transform:translateX(-6px)}
 40%{transform:translateX(6px)}
 60%{transform:translateX(-4px)}
 80%{transform:translateX(3px)}
}

@media (max-width:520px){
 .tw-levels{grid-template-columns:minmax(0,1fr)}
 .tw-pad{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px}
 .tw-num{min-height:46px;font-size:1.1rem}
 .tw-op{font-size:2rem}
}

@media (prefers-reduced-motion:reduce){
 .tw-num{transition:none}
 .tw-num:hover{transform:none}
 .tw-num.tw-shake{animation:none}
}