/* Spider ABN. Las ocho patas conectan el número central con sus operaciones. */
.aabn-app.aabn-board .aabn-spider-activity { display: grid; flex:1 0 auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(420px,1fr); gap:12px; min-width:0; }
.aabn-app.aabn-board .aabn-spider-controls { display: flex; align-items: end; justify-content: center; flex-wrap: wrap; gap: 12px 20px; }
.aabn-app.aabn-board .aabn-spider-controls label { display: grid; gap: 4px; margin: 0; color: #6f6383; font-size: 12px; font-weight: 750; }
.aabn-app.aabn-board .aabn-spider-controls select { min-width: 190px; min-height: 56px; border-color: #d7caeb; background-color: #fff; font-size: 18px; }
.aabn-app.aabn-board .aabn-spider-controls input { width: 120px; min-height: 56px; border-color: #d7caeb; background: #fff; text-align: center; font-size: 26px; font-weight: 850; }
.aabn-app.aabn-board .aabn-spider-character-picker { display:grid; gap:4px; align-self:end; min-width:0; max-width:100%; }
.aabn-app.aabn-board .aabn-spider-character-picker > span { color:#6f6383; font-size:12px; font-weight:750; }
.aabn-app.aabn-board .aabn-spider-character-picker > div { display:flex; gap:6px; align-items:center; min-height:56px; }
.aabn-app.aabn-board .aabn-spider-character-picker button { display:grid; place-items:center; width:48px; height:50px; min-width:44px; min-height:44px; padding:3px; border:2px solid #ddd2ed; border-radius:13px; color:#695187; background:#fff; cursor:pointer; touch-action:manipulation; }
.aabn-app.aabn-board .aabn-spider-character-picker button[aria-pressed="true"] { border-color:#9475c7; background:#f0e9fc; box-shadow:0 3px 0 #d6c9e9; }
.aabn-app.aabn-board .aabn-spider-character-picker button:focus-visible { outline:3px solid #e6ad36; outline-offset:3px; }
.aabn-app.aabn-board .aabn-spider-character-picker button > svg { display:block; width:36px; height:42px; max-width:100%; overflow:visible; }
.aabn-app.aabn-board .aabn-spider-stage { position: relative; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(160px, .9fr) minmax(170px, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: 10px; align-items: center; min-width: 0; height:auto; min-height:420px; padding: 7px; border-radius: 26px; background: radial-gradient(ellipse at center, #f0eafa 0%, #faf8fe 54%, #fff 85%); }
.aabn-app.aabn-board .aabn-spider-legs { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.aabn-app.aabn-board .aabn-spider-legs path { fill: none; stroke: #c2afe6; stroke-width: 11px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.aabn-app.aabn-board .aabn-spider-legs path.is-correct { stroke: #59ae98; }
.aabn-app.aabn-board .aabn-spider-monster { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; width:min(100%,330px); aspect-ratio: 260 / 310; filter: drop-shadow(0 7px 0 rgb(92 65 125 / 5%)); pointer-events: none; }
.aabn-app.aabn-board .aabn-spider-monster__art { display: block; width: 100%; height: 100%; overflow: visible; }
.aabn-app.aabn-board .aabn-spider-monster__number { position: absolute; top: 55%; left: 14%; right: 14%; color: #fff9dc; font-size: clamp(44px, 5vw, 80px); font-weight: 950; line-height: 1; letter-spacing: -.05em; text-align: center; text-shadow: 0 3px 0 rgb(72 39 117 / 13%); }
.aabn-app.aabn-board .aabn-spider-monster__cheer { position: absolute; bottom: -15px; left: 0; right: 0; color: #70528f; text-align: center; font-size: 19px; font-weight: 850; }
.aabn-app.aabn-board .aabn-spider-card { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(58px, 1fr) 15px minmax(70px, 1.15fr); align-items: center; gap: 7px; grid-column: var(--spider-column); grid-row: var(--spider-row); width: 100%; min-height: 74px; margin: 0; padding: 9px 10px; border: 2px solid #e0d6ef; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 rgb(151 122 190 / 7%); }
.aabn-app.aabn-board .aabn-spider-card__operation { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 56px; padding: 3px; border-radius: 13px; color: #5767a6; background: #f0f2fd; }
.aabn-app.aabn-board .aabn-spider-card__operation > span { font-size: 26px; font-weight: 600; }
.aabn-app.aabn-board .aabn-spider-card__operation > strong { font-size: 31px; font-weight: 850; line-height: 1; }
.aabn-app.aabn-board .aabn-spider-card__operation--subtraction { color: #a56737; background: #fff3e8; }
.aabn-app.aabn-board .aabn-spider-card__operation--multiplication { color: #8d5795; background: #faf0fc; }
.aabn-app.aabn-board .aabn-spider-card__equals { color: #80708d; font-size: 21px; font-weight: 600; text-align: center; }
.aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer { width: 100%; min-width: 0; max-width: none; min-height: 56px; padding: 5px 3px; border: 2px solid #9273b8; border-radius: 12px; background: #fff; color: #3d2856; text-align: center; font-size: clamp(25px, 2.6vw, 37px); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; box-shadow: none; }
.aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer::-webkit-inner-spin-button { appearance: none; margin: 0; }
.aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer::placeholder { color: #7b668d; }
.aabn-app.aabn-board .aabn-spider-card.is-correct { border-color: #8ac9b5; background: #f7fdf9; }
.aabn-app.aabn-board .aabn-spider-card.is-correct .aabn-spider-answer { border-color: #8ac9b5; background: #eff9f3; color: #2b7962; }
.aabn-app.aabn-board .aabn-spider-card.is-incorrect .aabn-spider-answer { border-color: #dfb875; background: #fffaf0; }
.aabn-app.aabn-board .aabn-spider-card__tick { position: absolute; top: -9px; right: -7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #3c9b7c; color: #fff; }
.aabn-app.aabn-board .aabn-spider-card__tick .aabn-icon { width: 18px; height: 18px; }
.aabn-app.aabn-board .aabn-spider-activity.is-complete .aabn-spider-stage { background: radial-gradient(ellipse at center, #eee8f9 0%, #f2fbf6 70%, #fff 100%); }
/* Un jardín sencillo para iniciación: la matemática conserva el primer plano. */
.aabn-app.aabn-board .is-spider-young .aabn-spider-stage { background: radial-gradient(ellipse at center, #fff6df 0%, #faf9ef 43%, #fff 83%); }
.aabn-app.aabn-board .is-spider-young .aabn-spider-controls label { color: #735c7d; font-weight: 800; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-controls :is(input, select) { border: 2px solid #ded0e9; border-radius: 17px; background-color: #fffcf5; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-legs > path { stroke: #c3b1df; stroke-width: 12px; }
.aabn-app.aabn-board .aabn-spider-legs .aabn-spider-garden__leaf > path { fill: #d8e7c9; stroke: none; }
.aabn-app.aabn-board .aabn-spider-legs .aabn-spider-garden__leaf .aabn-spider-garden__vein { fill: none; stroke: #aac697; stroke-width: 2px; }
.aabn-app.aabn-board .aabn-spider-legs .aabn-spider-garden__leaf.is-grown > path { fill: #8fc59c; }
.aabn-app.aabn-board .aabn-spider-legs .aabn-spider-garden__leaf.is-grown .aabn-spider-garden__vein { fill: none; stroke: #629e76; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-legs > path.is-correct { stroke: #78b798; }
.aabn-app.aabn-board .aabn-spider-monster__garden { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-monster__number { color: #fff4cc; text-shadow: 0 3px 0 rgb(70 37 106 / 15%); }
.aabn-app.aabn-board .aabn-spider-monster.is-character-robot .aabn-spider-monster__number { color:#2e5272; text-shadow:none; }
.aabn-app.aabn-board .aabn-spider-monster.is-character-egg .aabn-spider-monster__number { color:#7b5a32; text-shadow:none; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-card { border-color: #ddcfe9; border-radius: 21px; background: #fffefa; box-shadow: 0 4px 0 #f0e8f1; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-card__operation { border-radius: 16px; background: #edf2fd; color: #53669a; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-card__operation--subtraction { background: #fff0df; color: #9c632a; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-card__operation--multiplication { background: #f8eaf4; color: #975c88; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-card .aabn-spider-answer { border-radius: 15px; background: #fff; border-color: #9273b8; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-card.is-correct { border-color: #8bc5a8; background: #f5fcf6; box-shadow: 0 4px 0 #e5f1e5; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-card.is-correct .aabn-spider-answer { border-color: #8bc5a8; background: #eff9ef; color: #30704d; }
.aabn-app.aabn-board .is-spider-young .aabn-spider-card.is-incorrect .aabn-spider-answer { border-color: #dfb875; background: #fff9ef; }
.aabn-app.aabn-board .aabn-spider-card__medal { position: absolute; top: -13px; right: -8px; display: block; width: 34px; height: 34px; pointer-events: none; filter: drop-shadow(0 2px 0 rgb(174 124 29 / 10%)); }
.aabn-app.aabn-board .aabn-spider-card__medal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aabn-app.aabn-board .is-spider-young.is-complete .aabn-spider-stage { background: radial-gradient(ellipse at center, #fff6da 0%, #f0f8e9 60%, #fff 90%); }
@media (min-width: 1500px) and (min-height: 900px) {
	.aabn-app.aabn-board .aabn-spider-stage { min-height:520px; }
	.aabn-app.aabn-board .aabn-spider-card { min-height: 90px; padding: 12px 18px; }
	.aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer { min-height: 64px; font-size: 40px; }
	.aabn-app.aabn-board .aabn-spider-card__operation { min-height: 64px; }
	.aabn-app.aabn-board .aabn-spider-card__operation > strong { font-size: 36px; }
}
@media (max-width: 800px) {
	.aabn-app.aabn-board .aabn-spider-stage { grid-template-columns: minmax(140px, 1fr) minmax(120px, .8fr) minmax(140px, 1fr); column-gap: 12px; padding: 4px; }
	.aabn-app.aabn-board .aabn-spider-card { grid-template-columns: minmax(48px, 1fr) 10px minmax(55px, 1fr); gap: 4px; padding: 8px 6px; }
	.aabn-app.aabn-board .aabn-spider-card__operation { gap: 4px; }
	.aabn-app.aabn-board .aabn-spider-card__operation > strong { font-size: 27px; }
	.aabn-app.aabn-board .aabn-spider-card__operation > span { font-size: 23px; }
	.aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer { font-size: 25px; }
}
@media (max-width: 600px) {
	.aabn-app.aabn-board .aabn-spider-activity { grid-template-rows:auto auto; }
	.aabn-app.aabn-board .aabn-spider-controls { gap:8px 12px; }
	.aabn-app.aabn-board .aabn-spider-character-picker > div { flex-wrap:wrap; justify-content:center; }
	.aabn-app.aabn-board .aabn-spider-controls label { font-size: 11px; }
	.aabn-app.aabn-board .aabn-spider-controls select { min-width: 155px; width: 100%; font-size: 15px; }
	.aabn-app.aabn-board .aabn-spider-controls input { width: 95px; }
	.aabn-app.aabn-board .aabn-spider-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows:180px repeat(4,auto); height:auto; min-height:0; gap: 11px 10px; padding: 4px; background: radial-gradient(ellipse at top, #f3edfc 0%, #fff 85%); }
	.aabn-app.aabn-board .aabn-spider-legs { display: none; }
	.aabn-app.aabn-board .aabn-spider-monster { grid-column: 1 / -1; grid-row: 1; width: 150px; margin-top: -4px; }
	.aabn-app.aabn-board .aabn-spider-monster::before, .aabn-app.aabn-board .aabn-spider-monster::after { position: absolute; z-index: -1; top: 40%; width: 40px; height: 50px; border-top: 7px solid #c2afe6; border-bottom: 7px solid #c2afe6; border-radius: 10px; content: ''; }
	.aabn-app.aabn-board .aabn-spider-monster::before { left: -12px; transform: rotate(-10deg); }
	.aabn-app.aabn-board .aabn-spider-monster::after { right: -12px; transform: rotate(10deg); }
	.aabn-app.aabn-board .aabn-spider-monster__number { font-size: 44px; }
	.aabn-app.aabn-board .aabn-spider-monster__cheer { bottom: -3px; font-size: 15px; }
	.aabn-app.aabn-board .aabn-spider-card { grid-column: auto; grid-row: auto; grid-template-columns: minmax(45px, 1fr) 10px minmax(55px, 1.1fr); padding: 8px 5px; gap: 3px; min-height: 76px; border-radius: 15px; }
	.aabn-app.aabn-board .aabn-spider-card__operation > strong { font-size: 25px; }
	.aabn-app.aabn-board .aabn-spider-card__operation > span { font-size: 21px; }
	.aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer { padding: 5px 1px; font-size: 24px; }
}
@media (max-width:360px) {
	.aabn-app.aabn-board .aabn-spider-stage { grid-template-columns:minmax(0,1fr); }
	.aabn-app.aabn-board .aabn-spider-card { min-width:0; }
	.aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer { min-width:55px; }
}
@media (prefers-reduced-motion: no-preference) {
	.aabn-app.aabn-board .aabn-spider-legs path { transition: stroke .18s ease; }
	.aabn-app.aabn-board .aabn-spider-activity.is-complete .aabn-spider-monster { animation: aabn-spider-happy .5s ease-out; }
	@keyframes aabn-spider-happy { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-10px) rotate(-3deg); } 75% { transform: translateY(-3px) rotate(2deg); } }
	.aabn-app.aabn-board .aabn-spider-card__medal { animation: aabn-spider-medal .2s ease-out; }
	@keyframes aabn-spider-medal { from { transform: scale(.75); } to { transform: scale(1); } }
}
.aabn-app.aabn-board.aabn-reduced-stimuli .aabn-spider-activity { gap: 12px; }
.aabn-app.aabn-board.aabn-reduced-stimuli .aabn-spider-activity :is(.aabn-spider-garden, .aabn-spider-monster__garden, .aabn-spider-medal__face) { display: none; }
.aabn-app.aabn-board.aabn-reduced-stimuli .aabn-spider-stage { background: #fff; }
.aabn-app.aabn-board.aabn-reduced-stimuli .aabn-spider-activity * { animation: none !important; transition: none !important; }
.aabn-app.aabn-board.aabn-reduced-stimuli .aabn-spider-card, .aabn-app.aabn-board.aabn-reduced-stimuli .aabn-spider-monster, .aabn-app.aabn-board.aabn-reduced-stimuli .aabn-spider-card__medal { box-shadow: none; filter: none; }

/* Un jardín muy tenue acompaña al personaje sin tapar las operaciones. */
.aabn-app.aabn-board .aabn-spider-scenery { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; pointer-events:none; }
.aabn-app.aabn-board .aabn-spider-monster:is(.is-character-frog,.is-character-fox) .aabn-spider-monster__number { top:63%; color:#254c3d; text-shadow:none; }
.aabn-app.aabn-board .aabn-spider-monster.is-character-fox .aabn-spider-monster__number { color:#744a2f; }
.aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer:focus-visible { outline:3px solid #bd861b; outline-offset:3px; }
@media screen and (min-width:1201px) {
 .aabn-app.aabn-board .aabn-spider-card { min-height:106px; padding:12px 16px; }
 .aabn-app.aabn-board .aabn-spider-card__operation { min-height:72px; }
 .aabn-app.aabn-board .aabn-spider-card__operation > strong { font-size:42px; }
 .aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer { min-height:72px; font-size:44px; }
}
@media screen and (min-width:769px) and (max-width:1200px) {
 .aabn-app.aabn-board .aabn-spider-activity { grid-template-rows:auto minmax(350px,1fr); }
 .aabn-app.aabn-board .aabn-spider-stage { grid-template-columns:minmax(145px,1fr) minmax(125px,.8fr) minmax(145px,1fr); gap:10px 12px; padding:4px; min-height:350px; }
 .aabn-app.aabn-board .aabn-spider-card { grid-template-columns:minmax(43px,1fr) 10px minmax(55px,1fr); gap:4px; min-height:74px; padding:8px 5px; }
 .aabn-app.aabn-board .aabn-spider-card__operation { gap:3px; min-height:54px; }
 .aabn-app.aabn-board .aabn-spider-card__operation > strong { font-size:27px; }
 .aabn-app.aabn-board .aabn-spider-card__operation > span { font-size:23px; }
 .aabn-app.aabn-board .aabn-spider-card .aabn-spider-answer { min-height:54px; font-size:27px; }
 .aabn-app.aabn-board .aabn-spider-controls { gap:8px 12px; }
 .aabn-app.aabn-board .aabn-spider-controls select { min-width:150px; font-size:16px; }
 .aabn-app.aabn-board .aabn-spider-controls input { width:94px; }
 .aabn-app.aabn-board .aabn-spider-controls .aabn-spider-character-picker { justify-items:center; }
 .aabn-app.aabn-board .aabn-spider-monster__number { font-size:44px; }
}
.aabn-app.aabn-board.aabn-reduced-stimuli .aabn-spider-scenery { display:none; }
.aabn-app.aabn-board.aabn-high-contrast .aabn-spider-scenery { display:none; }
.aabn-app.aabn-board.aabn-high-contrast .aabn-spider-stage { background:#fff; }
.aabn-app.aabn-board.aabn-high-contrast :is(.aabn-spider-card,.aabn-spider-card__operation,.aabn-spider-answer,.aabn-spider-controls label,.aabn-spider-character-picker > span) { color:#000 !important; border-color:#000 !important; }
.aabn-app.aabn-board.aabn-high-contrast .aabn-spider-card .aabn-spider-answer::placeholder { color:#000; }