/* 活动一：徐州市内路线测量（幼儿园：除了序号不出现文字） */

/* 左侧栏 */
.side {
  position: absolute; left: 0; top: 0; bottom: 0; width: 330px; z-index: 60;
  padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; align-items: stretch;
  background: linear-gradient(180deg, rgba(222, 245, 241, .96), rgba(190, 228, 223, .96));
  border-right: 3px solid rgba(47, 120, 110, .18);
  box-shadow: 10px 0 30px rgba(40, 80, 75, .12);
}
.sid-chip { height: 56px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 28px; font-weight: 900; color: var(--ink); border: 2px solid rgba(63, 44, 29, .08); }
.sid-chip svg { width: 28px; height: 28px; color: var(--ink-soft); }
.sid-chip.need-id { border-color: var(--cinnabar); color: var(--cinnabar-deep); }
.side-card { border-radius: 24px; background: rgba(255, 255, 255, .72); border: 2px solid rgba(47, 120, 110, .14); padding: 12px 14px 14px; }

/* 测量条按钮：点一下出一根 */
.src-card { position: relative; height: 96px; display: grid; place-items: center; cursor: pointer; font: inherit; background: rgba(127, 224, 166, .22); border: 3px dashed rgba(47, 174, 116, .5); }
.src-card .ruler { position: relative; width: 120px; height: 26px; }
.src-card .plus { position: absolute; right: 14px; top: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--jade); color: #fff; font-size: 28px; font-weight: 900; line-height: 1; box-shadow: 0 3px 0 var(--jade-deep); }
.src-card:active { transform: scale(.96); }

/* 小汽车按钮：沿测量条开一开 */
.car-btn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; align-self: center; width: 210px; height: 130px; }
.car-btn img { width: 190px; animation: car-bob 2.6s ease-in-out infinite; }
.car-btn .play { position: absolute; right: 4px; bottom: 8px; width: 48px; height: 48px; border-radius: 50%; background: var(--jade) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23fff'/%3E%3C/svg%3E") center / 30px no-repeat; border: 3px solid #fff; box-shadow: 0 4px 0 var(--jade-deep); }
.car-btn:not(.ready) .play { filter: grayscale(.8); opacity: .55; }
.car-btn:active { transform: scale(.95); }
@keyframes car-bob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }

/* 数字 */
.pad-card { padding-top: 10px; transition: opacity .3s, filter .3s; }
.pad-card.locked { opacity: .4; filter: grayscale(.6); }
.answer { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.answer b { min-width: 80px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 44px; color: var(--ink); background: #fff; border: 3px solid rgba(63, 44, 29, .12); }
.answer b.set { background: linear-gradient(180deg, #ffd56a, var(--gold)); border-color: #c98a0c; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.ruler.mini { position: relative; display: inline-block; width: 70px; height: 20px; vertical-align: middle; }
@keyframes pop { from { transform: scale(.6); } }
.pad-card .keypad { gap: 10px; }
.pad-card .key { height: 56px; font-size: 30px; }
.submit { margin-top: auto; height: 84px; display: grid; place-items: center; }
.submit svg { width: 48px; height: 48px; }
.submit.saving { animation: saving 1s ease-in-out infinite; }
@keyframes saving { 50% { opacity: .5; } }

/* 顶部：目的地 + 五个步骤（序号 + 图标） */
.topline { position: absolute; left: 356px; top: 16px; right: 24px; display: flex; align-items: center; gap: 14px; z-index: 50; }
.dest-chip { height: 64px; padding: 0 16px 0 18px; border-radius: 32px; display: flex; align-items: center; gap: 10px; background: rgba(255, 250, 238, .94); border: 2px solid rgba(63, 44, 29, .1); box-shadow: 0 6px 16px rgba(90, 60, 30, .14); }
.dest-chip .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--cinnabar); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--cinnabar); }
.dest-chip img { width: 54px; height: 54px; object-fit: contain; }
.dest-chip .q { width: 54px; text-align: center; font-size: 30px; font-weight: 900; color: #c5b392; }
.steps { display: flex; gap: 8px; }
.step { height: 52px; padding: 0 12px 0 8px; border-radius: 26px; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); background: rgba(255, 250, 238, .7); border: 2px solid rgba(63, 44, 29, .06); }
.step i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 18px; font-weight: 900; color: #fff; background: #c5b392; }
.step .ic { width: 44px; height: 36px; display: grid; place-items: center; }
.step .ic svg { width: 30px; height: 30px; }
.step .ic img { width: 44px; }
.step .ic .ruler.mini { width: 42px; height: 16px; }
.step .ic .k { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; color: #fff; background: #3b78dc; }
.step.done { background: rgba(220, 245, 230, .9); }
.step.done i { background: var(--jade); }
.step.done .ic { opacity: .55; }
.step.now { background: #fffaf0; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(244, 181, 44, .25); }
.step.now i { background: var(--gold); color: var(--ink); }

/* 右侧竖排工具：垃圾桶 / 再听一遍 / 重新开始 / 首页 */
.map-tools { position: absolute; right: 18px; top: 296px; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.map-tools .trash { width: 92px; height: 92px; }
.map-tools .icon-btn { width: 64px; height: 64px; }

/* 地点 */
.place { position: absolute; z-index: 5; pointer-events: auto; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), opacity .3s, filter .3s; }
.place img { width: 100%; height: 100%; object-fit: contain; display: block; }
.place.on { transform: scale(1.12); z-index: 6; }
.place.dim { opacity: .45; filter: grayscale(.5); }
.pin {
  position: absolute; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; z-index: 8; pointer-events: auto; cursor: pointer;
  background: radial-gradient(circle, #fff 0 30%, var(--cinnabar) 33%);
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--cinnabar-deep), 0 4px 10px rgba(169, 44, 24, .4);
}
.pin.on { transform: scale(1.3); }
.pin.on::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 4px solid var(--gold); animation: ring 1.3s ease-out infinite; }
@keyframes ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.pin.start { width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; cursor: default; }
.start-star { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; z-index: 8; }

/* 选了目的地：其它路变淡，去目的地的路金边 + 流动虚线 */
#allRoads { transition: opacity .4s; }
#allRoads.faded { opacity: .28; }
#routeGlow .march { animation: march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -30; } }

/* 小车 */
.car { position: absolute; width: 100px; height: 56px; margin: -28px 0 0 -50px; z-index: 20; }
.car img { width: 100%; height: 100%; display: block; }
.car.shake { animation: shake .45s ease 2; }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

/* 结束 */
.finish-card { width: 760px; padding: 46px 56px 44px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
.finish-card .pic { position: relative; height: 280px; }
.finish-card .pic img { width: 290px; height: 280px; object-fit: contain; }
.finish-card .pic .seal { right: -4px; bottom: -14px; width: 120px; height: 120px; }
.finish-card .pic .seal svg { width: 64px; height: 64px; }
.big-result { display: flex; align-items: center; gap: 18px; }
.big-result .ruler.mini { width: 110px; height: 30px; }
.big-result b { font-size: 110px; line-height: 1; }
.finish-card .actions { display: flex; gap: 16px; margin-top: 30px; position: relative; z-index: 2; }
.btn.round { width: 96px; height: 96px; padding: 0; border-radius: 30px; display: grid; place-items: center; }
.btn.round svg { width: 46px; height: 46px; }

/* 进入页：只有图、学号键盘、开始 */
/* 左栏用 minmax(0,1fr)，图片再多也不会把右边键盘挤出卡片 */
.entry { width: 1100px; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; }
.entry-pics { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.entry-car { width: 300px; animation: car-bob 2.6s ease-in-out infinite; }
.entry-places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
.entry-places img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.entry-who { display: grid; place-items: center; margin-bottom: 10px; color: var(--ink-soft); }
.entry-who svg { width: 44px; height: 44px; }
.entry-go { display: grid; place-items: center; }
.entry-go svg { width: 44px; height: 44px; }

/* 入场 */
#roads { animation: fade-in .6s ease both; }
.place, .pin, .start-star { animation: pop-in .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.place:nth-child(2n), .pin:nth-child(3n) { animation-delay: .12s; }
.place:nth-child(3n) { animation-delay: .22s; }
@keyframes pop-in { from { opacity: 0; transform: scale(.3); } }
.place.on { animation: none; }
.overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }