/* משחקים */
.game-card { display: flex; flex-direction: column; }
.game-card .game-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 6px; }
.game-card p { flex: 1; }
.game-wrap { max-width: 900px; margin: 0 auto; }
.game-hud { font-weight: 600; }
.mb-s { margin-bottom: 8px; }
.canvas-box { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 70vh; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #5aa9ff; touch-action: none; user-select: none; }
.canvas-box canvas { width: 100%; height: 100%; display: block; }
.game-msg { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 16, 30, .55); color: #fff; text-align: center; padding: 20px; }
.game-msg > * { max-width: 460px; }
.game-msg h2 { color: #fff; font-size: 1.6rem; }
.game-msg p { color: rgba(255,255,255,.9); }
.game-ctrls { justify-content: center; }
.game-ctrls .btn { min-width: 90px; }
@media (hover: hover) and (pointer: fine) { .game-ctrls { display: none; } }
.q-overlay .question .passage { max-height: 30vh; }

/* הגנת המגדלים */
.td-layout { display: grid; grid-template-columns: 1fr 250px; gap: 12px; align-items: start; }
.td-canvas { aspect-ratio: 12 / 8; max-height: none; background: #8fd17c; cursor: crosshair; }
.td-panel .btn.block { width: 100%; }
.td-shop { display: grid; gap: 6px; }
.td-item { justify-content: flex-start; text-align: right; padding: 7px 10px; }
.td-item .ic { font-size: 1.4rem; }
.td-item.selected { border-color: var(--primary); background: var(--primary-soft); }
@media (max-width: 760px) { .td-layout { grid-template-columns: 1fr; } .td-canvas { aspect-ratio: 12 / 8; } }

/* בלונים */
.sky-box { position: relative; height: 56vh; min-height: 380px; border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, #7cc4ff 0%, #d9ecff 70%, #bde3ff 100%); box-shadow: var(--shadow); }
.sky-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0 26px, transparent 27px), radial-gradient(circle at 75% 20%, rgba(255,255,255,.6) 0 34px, transparent 35px), radial-gradient(circle at 55% 65%, rgba(255,255,255,.5) 0 22px, transparent 23px); }
.balloon { position: absolute; top: 0; width: 22%; min-width: 90px; max-width: 170px; border: none; background: none; cursor: pointer; padding: 0; will-change: transform; transition: opacity .3s; }
.balloon .bl-body { display: block; background: var(--c); color: #1a2233; border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%; aspect-ratio: 0.85; display: grid; place-items: center; padding: 10px; font-weight: 600; font-size: .95rem; line-height: 1.25; box-shadow: inset -10px -12px 0 rgba(0,0,0,.08), inset 8px 10px 0 rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.18); text-align: center; overflow: hidden; }
.balloon .bl-body::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; background: var(--c); transform: translateX(-50%) rotate(45deg); }
.balloon .bl-string { display: block; width: 2px; height: 40px; margin: 10px auto 0; background: rgba(0,0,0,.35); }
.balloon:hover .bl-body { filter: brightness(1.06); }
.balloon.pop .bl-body { animation: pop-balloon .35s ease-out forwards; }
.balloon.right .bl-body { outline: 4px solid var(--ok); animation: pulse .6s ease-in-out 3; }
@keyframes pop-balloon { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.35); opacity: .7; } 100% { transform: scale(0); opacity: 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.balloon .katex { font-size: 1em; }
@media (max-width: 640px) { .balloon .bl-body { font-size: .8rem; padding: 6px; } .sky-box { height: 50vh; } }