.web-cover-image { display: block; width: 100%; height: auto; }
body.spider-game { color: #344568; background: #eaf5fc; }
body.spider-game > .site-header, body.spider-game > footer { display: none; }
body.spider-game #app { width: calc(100% - 32px); max-width: 1100px; margin-inline: auto; padding-bottom: 16px; min-height: 100dvh; }
.spider-game h1, .spider-game h2, .spider-game h3 { font-family: Library, 'Trebuchet MS', sans-serif; color: #344568; }
.spider-game button, .spider-game .button { min-height: 48px; min-width: 48px; }
.spider-game .web-primary { padding: 10px 18px; background: #c64d62; color: white; border: 2px solid #a93951; box-shadow: 0 3px 0 #883149; }
.spider-game .web-primary:hover { background: #af3a52; }
.spider-game .secondary { background: #fffefa; color: #344568; border-color: #bacbe0; }
.spider-game :is(button,a,input,summary):focus-visible { outline: 3px solid #d69b25; outline-offset: 3px; }
.web-toolbar { display: grid; grid-template-columns: 135px minmax(0,1fr) auto 48px auto; gap: 8px 10px; align-items: center; padding: 8px 0; }
.web-toolbar h1 { font-size: 20px; line-height: 1.25; margin: 0 0 3px; }
.web-toolbar span, .web-toolbar button, .web-toolbar a { font-size: 14px; }
.web-motion { justify-self: end; display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 14px; cursor: pointer; }
.web-motion input { width: 22px; height: 22px; accent-color: #526fac; }
.web-cover, .web-finish { text-align: center; }
.web-cover h2, .web-finish h2 { font-size: 36px; line-height: 1.2; margin: 18px 0 14px; }
.web-cover > p, .web-finish > p { max-width: 780px; margin: 16px auto; }
.web-cover-scene { max-width: 840px; position: relative; margin: 20px auto 0; }
.web-cover-scene > img { border-radius: 8px; }
.web-city-heading { text-align: center; }
.web-city-heading h2 { font-size: 28px; margin: 16px 0 6px; }
.web-city-heading p { font-size: 16px; margin: 0 0 10px; }
.web-city-scene { position: relative; height: min(58dvh,480px); background: #ddf4fc; border: 2px solid #a6c4dd; border-radius: 8px; }
.web-route-art { display: block; width: 100%; height: 100%; }
.web-route { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)) 44px; gap: 6px; max-width: 720px; margin: 14px auto; align-items: center; }
.route-node { position: relative; display: grid; place-items: center; min-height: 38px; }
.route-node::before { content: ''; position: absolute; height: 3px; background: #bacbe0; inset: 50% -8px auto 0; }
.route-node b { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid #93aacc; border-radius: 50%; background: #f7fbff; font-size: 16px; }
.route-node.done b { background: #d4ebc2; border-color: #80a770; }
.route-node.current b { border-color: #c74e66; }
.web-route-kitten { width: 44px; height: 44px; position: relative; }
.web-route-kitten svg { width: 100%; height: 100%; }
.web-critters { position: absolute; inset: 0; pointer-events: none; }
.web-critter { position: absolute; width: 19px; height: 19px; animation: web-crawl 5s ease-in-out infinite alternate; }
.web-critter svg { display: block; width: 100%; height: 100%; }
.critter-0 { left: 2%; top: 10%; animation-delay: -.8s; }
.critter-1 { left: 28%; top: 2%; animation-duration: 6s; animation-name: web-drop; }
.critter-2 { left: 63%; top: 8%; animation-delay: -2s; }
.critter-3 { left: 2%; bottom: 8%; animation-duration: 7s; }
.critter-4 { left: 28%; bottom: 7%; animation-delay: -3s; }
.critter-5 { left: 80%; bottom: 4%; animation-duration: 4s; }
.critters-paused .web-critter { animation-play-state: paused; }
.web-task-dialog, .web-dialog { padding: 16px 22px; background: #fffefd; color: #344568; border: 3px solid #425e8b; border-radius: 8px; width: min(960px,calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow: auto; box-sizing: border-box; }
.web-task-dialog::backdrop { background: #2339558c; }
.web-dialog { width: min(620px,calc(100% - 24px)); }
.web-dialog::backdrop { background: #23395566; }
.web-modal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.web-modal-top > span { font-weight: 700; color: #9d3d59; }
.web-modal-top a { display: inline-flex; align-items: center; min-height: 48px; color: #344568; text-decoration: underline; font-size: 14px; }
.web-task-dialog h2 { font-size: 24px; line-height: 1.2; text-align: center; margin: 0 0 5px; }
.web-equation { display: flex; justify-content: center; flex-wrap: wrap; text-align: center; font-size: 34px; line-height: 1.25; font-weight: 800; margin: 3px 0 5px; }
.web-instruction { font-size: 18px; line-height: 1.3; text-align: center; min-height: 24px; display: grid; place-items: center; margin: 0 0 9px; }
.web-learning-zones { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 22px; }
.web-learning-zones h3 { text-align: center; font-size: 18px; margin: 0 0 9px; line-height: 1.25; min-height: 23px; }
.web-ten-frame { display: grid; grid-template-columns: repeat(5,52px); grid-template-rows: repeat(2,52px); gap: 7px; width: max-content; max-width: 100%; margin: 0 auto; padding: 12px; border: 2px solid #a695c6; border-radius: 8px; background-color: #f5f0fb; background-image: repeating-linear-gradient(35deg,transparent,transparent 18px,#dbd0eb66 19px,#dbd0eb66 20px); }
.web-basket { display: grid; grid-template-columns: repeat(5,52px); grid-auto-rows: 52px; gap: 7px; min-height: 142px; align-content: start; width: max-content; max-width: 100%; margin: 0 auto; padding: 12px; border: 2px solid #cfb56d; border-bottom: 8px solid #caa756; border-radius: 8px; background: #fff6d3; }
.web-slot, .web-basket-space { display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; }
.web-slot { padding: 3px; border: 2px solid #c0b2d7; border-radius: 7px; background: #ebe0f8; }
.web-slot svg { width: 42px; height: 42px; display: block; pointer-events: none; }
.web-slot.initial svg ellipse { fill: #9c79c5; }
.web-slot.yellow { border-color: #c6a14a; background: #fff1ae; }
.web-slot.yellow svg ellipse { fill: #f7d354; }
.web-slot.web-empty { border: 2px dashed #baa6d2; background: #fffefd; }
button.web-slot { cursor: pointer; box-shadow: 0 2px 0 #c0a46d; }
button.web-slot:hover:not(:disabled) { border-color: #795b9a; background: #ffe584; }
button.web-slot:disabled { opacity: .6; cursor: default; }
.web-counters { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 36px; font-size: 18px; margin: 9px 0 4px; }
.web-counters strong { color: #865320; }
.web-decomposition { display: grid; place-items: center; min-height: 35px; font-size: 24px; font-weight: 800; color: #89526e; }
.web-feedback { display: flex; flex-direction: column; justify-content: center; min-height: 74px; padding: 8px 12px; background: #eef4fa; border: 1px solid #d0deeb; border-radius: 6px; font-size: 17px; line-height: 1.35; margin: 5px 0 9px; }
.web-feedback p { margin: 0; }
.web-feedback.error { color: #9e3f53; background: #fff0ed; border-color: #edc6be; }
.web-feedback.success { color: #366c53; background: #eef8ef; }
.web-feedback.hint { background: #fff7df; border-color: #e2ce8e; }
.web-modal-actions { display: flex; align-items: center; justify-content: center; min-height: 52px; gap: 10px; }
.web-modal-actions > strong { color: #397354; font-size: 22px; }
.web-modal-actions button { min-width: 150px; font-size: 19px; }
.web-answer-options { display: grid; grid-template-columns: repeat(3,minmax(80px,140px)); justify-content: center; gap: 16px; width: 100%; }
.web-answer-options .web-answer { min-width: 0; min-height: 56px; font-size: 29px; font-weight: 800; background: #fff0b5; border: 2px solid #ccac53; color: #344568; }
.web-answer-options .web-answer:hover { background: #ffe181; }
.web-answer-options .web-tried { background: #f8e5e7; border-color: #d896a2; }
.web-support { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; min-height: 48px; }
.web-support button { font-size: 16px; min-height: 48px; }
.web-counting-path { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.web-counting-path span { display: grid; place-items: center; min-width: 26px; height: 28px; font-weight: 700; background: white; border: 1px solid #a4bfd3; border-radius: 4px; }
.web-counting-path .active { background: #ffe38b; border-color: #cba64d; }.web-counting-path i { font-style: normal; }
.web-demo-tap { animation: web-tap .8s ease-in-out infinite; }
.web-hint-slot { animation: web-empty-hint 2.6s ease-in-out infinite; animation-delay: var(--slot-delay); }
.web-jumping { animation: web-jump 1s ease-in-out forwards; }
.web-swing-line { stroke-dasharray: 700; animation: web-rope 1s ease-out; }
.web-final-scene { position: relative; max-width: 850px; margin: 20px auto; }
.web-final-scene > svg { display: block; width: 100%; height: auto; }
.web-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.web-stats > div { background: #fffefa; border: 1px solid #b7cbe2; border-radius: 8px; padding: 16px; display: grid; gap: 5px; }
.web-stats strong { font-size: 36px; color: #3e78aa; }.web-stats span { font-size: 15px; }
.web-finish-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
@keyframes web-crawl { 0%,30% { transform: translate(0,0) rotate(-5deg); } 70%,100% { transform: translate(10px,3px) rotate(10deg); } }
@keyframes web-drop { 0%,30% { transform: translateY(0); } 70%,100% { transform: translateY(18px); } }
@keyframes web-tap { 50% { outline: 3px solid #d06e44; outline-offset: 3px; } }
@keyframes web-empty-hint { 0%,20%,100% { background: #fffefd; } 35%,55% { background: #ffe087; border-color: #b9832c; } }
@keyframes web-jump { 0% { transform: translate(0,0); } 50% { transform: translate(calc(var(--jump-x)/2),var(--jump-mid-y)) rotate(-12deg); } 100% { transform: translate(var(--jump-x),var(--jump-y)); } }
@keyframes web-rope { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
@media (max-width:1000px) {
  .web-toolbar { grid-template-columns: 135px minmax(0,1fr) auto 48px; }.web-motion { grid-column: 2 / -1; min-height: 30px; }
}
@media (max-width:760px) {
  body.spider-game #app { width: calc(100% - 16px); }
  .web-toolbar { grid-template-columns: minmax(0,1fr) auto 48px; }.web-toolbar > div { grid-column: 1 / -1; grid-row: 1; }.web-toolbar h1 { font-size: 18px; }.web-motion { grid-column: 1 / -1; justify-self: start; }
  .web-task-dialog { padding: 12px; width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .web-learning-zones { gap: 14px; grid-template-columns: 1fr; }
  .web-ten-frame, .web-basket { grid-template-columns: repeat(5,48px); grid-auto-rows: 48px; gap: 5px; padding: 8px; }
  .web-ten-frame { grid-template-rows: repeat(2,48px); }.web-basket { min-height: 72px; }
  .web-slot,.web-basket-space { width: 48px; height: 48px; }.web-slot svg { width: 40px; height: 40px; }
  .web-instruction { font-size: 17px; min-height: 0; margin-block: 7px 12px; }
  .web-equation { font-size: 29px; }.web-task-dialog h2 { font-size: 22px; }
  .web-modal-top { font-size: 14px; gap: 8px; }.web-modal-top a { font-size: 13px; }
  .web-counters { font-size: 17px; gap: 10px 20px; }.web-feedback { min-height: 92px; font-size: 16px; }
  .web-answer-options { gap: 10px; grid-template-columns: repeat(3,minmax(65px,100px)); }
  .web-city-scene { height: 340px; }.web-route { gap: 2px; grid-template-columns: repeat(8,minmax(0,1fr)) 34px; }.route-node b { width: 27px; height: 27px; font-size: 13px; }.web-route-kitten { width: 34px; height: 34px; }
  .web-cover h2,.web-finish h2 { font-size: 28px; }
}
@media (max-width:420px) {
  .web-task-dialog { padding: 8px; }.web-ten-frame, .web-basket { gap: 4px; padding: 6px; }
  .web-modal-top { flex-wrap: wrap; gap: 0 6px; }.web-task-dialog h2 { font-size: 21px; }.web-learning-zones h3 { font-size: 17px; }
  .web-stats { grid-template-columns: 1fr; }.web-stats > div { display: flex; align-items: center; text-align: left; gap: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .spider-game *, .spider-game *::before, .spider-game *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width:350px) {
  .web-task-dialog { width: calc(100% - 4px); padding: 8px 2px; border-width: 2px; }
  .web-ten-frame, .web-basket { padding: 4px; gap: 4px; }
  .web-modal-top { padding-inline: 5px; }
}