/* Build a Truck (2D canvas, arcade-kit stage + DOM part picker) */
.bt-start h3 { margin-top: 0; }
.bt-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 10px 0; }
.bt-sticker { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 16px; border: 2px dashed rgba(255, 255, 255, .2); text-align: center; }
.bt-sticker span { font-size: 40px; line-height: 1; filter: grayscale(1); opacity: .5; }
.bt-sticker.is-got { border-style: solid; border-color: #facc15; background: rgba(250, 204, 21, .1); }
.bt-sticker.is-got span { filter: none; opacity: 1; }
.bt-sticker small { font-weight: 700; font-size: 13px; }
.bt-hint { opacity: .85; }
.bt-wrap { position: relative; width: 100%; }
.bt-wrap .ak-stage { border-radius: 14px; overflow: hidden; }
.bt-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.bt-tb button { background: rgba(8, 16, 28, .7); color: #fff; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 6px 10px; font: 700 15px system-ui, sans-serif; cursor: pointer; }
.bt-bubble { position: absolute; left: 12px; top: 10px; max-width: min(70%, 520px); background: #fff; color: #1e293b; border-radius: 16px; padding: 10px 14px; font: 700 15px/1.35 system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.bt-bubble.is-on { opacity: 1; transform: none; }
.bt-bubble:empty { display: none; }
.bt-panel { margin-top: 12px; width: 100%; align-self: stretch; box-sizing: border-box; }
.bt-step { margin: 0 0 10px; font-size: 20px; }
.bt-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bt-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: inherit; font: 800 15px system-ui, sans-serif; cursor: pointer; }
.bt-opt canvas { width: 100%; max-width: 200px; aspect-ratio: 240 / 150; border-radius: 10px; background: #e2e8f0; }
.bt-opt.is-on { border-color: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, .35); }
.bt-opt:hover { border-color: rgba(250, 204, 21, .6); }
.bt-opt:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }
.bt-back { margin-top: 10px; }
.bt-ready { display: flex; gap: 10px; flex-wrap: wrap; }
.bt-act { width: 100%; min-height: 76px; justify-content: center; text-align: center; font-size: 24px; border-radius: 18px; touch-action: none; user-select: none; -webkit-user-select: none; }
.bt-act:disabled { opacity: .45; }
.bt-act.is-ready { animation: bt-pulse 1s ease-in-out infinite; }
@keyframes bt-pulse { 50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(250, 204, 21, .25); } }
@media (prefers-reduced-motion: reduce) { .bt-act.is-ready { animation: none; } .bt-bubble { transition: none; } }
@media (max-width: 560px) { .bt-opts { grid-template-columns: repeat(2, 1fr); } .bt-bubble { font-size: 13px; max-width: calc(100% - 128px); } }
.bt-wrap > .sim-result { border-radius: 14px; }