/* Speak Farm Animal — extra styles (traffic lights + cards). Traffic-light colours match Speak Dog. */
:root { --tl-red: #d33b2c; --tl-yellow: #f2b705; --tl-green: #3fcf55; }
.al-xp { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 6px 12px; font-weight: 900; font-size: 15px; background: #fff; border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow); }
.al-pick-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .al-pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.al-pick { min-height: 150px; border-radius: var(--radius); border: 4px solid #fff; background: linear-gradient(180deg, #fff, #fff3c7); box-shadow: var(--shadow);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 8px; font: inherit; color: var(--ink);
  text-align: center; text-decoration: none; touch-action: manipulation; }
.al-pick:active { transform: translateY(3px); }
.al-pick__emoji { font-size: 56px; line-height: 1; }
.al-pick__name { font-weight: 900; font-size: 21px; line-height: 1.1; }
.al-pick__sub { font-weight: 800; font-size: 14px; color: var(--ink-2); line-height: 1.2; }
.al-pick--dog { grid-column: 1 / -1; flex-direction: row; min-height: 96px; gap: 14px; background: linear-gradient(180deg, #fff, #e6f4ff); justify-content: flex-start; text-align: left; padding: 10px 16px; }
.al-pick--dog .al-pick__emoji { font-size: 48px; }
.al-pick--dog > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-meter { width: 100%; max-width: 140px; height: 10px; border-radius: 999px; background: #eee3cc; overflow: hidden; }
.al-meter > i { display: block; height: 100%; background: var(--green); border-radius: 999px; }

/* traffic light lamp */
.al-lamp { display: inline-flex; flex-direction: column; gap: 5px; background: #2b2622; border-radius: 16px; padding: 7px; flex: none; border: 3px solid #fff; box-shadow: var(--shadow); }
.al-lamp > i { width: 26px; height: 26px; border-radius: 50%; background: #4d4540; display: block; }
.al-lamp.is-red > .r { background: var(--tl-red); box-shadow: 0 0 12px var(--tl-red); }
.al-lamp.is-yellow > .y { background: var(--tl-yellow); box-shadow: 0 0 12px var(--tl-yellow); }
.al-lamp.is-green > .g { background: var(--tl-green); box-shadow: 0 0 12px var(--tl-green); }
.al-lamp--small { padding: 4px; gap: 3px; border-width: 2px; border-radius: 10px; }
.al-lamp--small > i { width: 11px; height: 11px; }
.al-lights { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.al-lights li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 8px 12px; font-size: 16px; line-height: 1.3; }
.al-lights b { display: block; font-size: 15px; letter-spacing: .06em; }
.al-light-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 900; font-size: 15px; letter-spacing: .06em; border-radius: 999px; padding: 6px 14px; color: #fff; }
.al-light-tag.is-red { background: var(--tl-red); }
.al-light-tag.is-yellow { background: var(--tl-yellow); color: #3b2500; }
.al-light-tag.is-green { background: #238a35; }

/* card grid */
.al-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .al-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.al-tile { position: relative; min-height: 120px; border-radius: 18px; border: 4px solid #fff; background: #fff; box-shadow: var(--shadow); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; font: inherit; color: var(--ink); text-align: center; touch-action: manipulation; }
.al-tile:active { transform: translateY(3px); }
.al-tile.is-red { border-top: 10px solid var(--tl-red); }
.al-tile.is-yellow { border-top: 10px solid var(--tl-yellow); }
.al-tile.is-green { border-top: 10px solid var(--tl-green); }
.al-tile.is-got { background: linear-gradient(180deg, #fff, #eaf7e6); }
.al-tile.is-locked { background: #f1ece2; color: var(--ink-2); cursor: default; }
.al-tile__pic { width: 64px; height: 64px; font-size: 46px; line-height: 64px; }
.al-tile__pic .herd-art { width: 64px; height: 64px; }
.al-tile__title { font-weight: 900; font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }
.al-tile__got { position: absolute; top: 4px; right: 6px; font-size: 20px; }

/* card detail */
.al-card { border-top: 14px solid var(--tl-green); }
.al-card.is-red { border-top-color: var(--tl-red); }
.al-card.is-yellow { border-top-color: var(--tl-yellow); }
.al-card__top { display: flex; align-items: center; gap: 12px; }
.al-card__pic { flex: none; width: 110px; min-height: 96px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; font-size: 76px; line-height: 1;
  background: radial-gradient(circle at 50% 62%, #eaf7e6 0 58%, transparent 59%); }
.al-card__pic .herd-art { width: 100%; }
.al-card__pic--two .herd-art { width: 50%; }
.al-card__pic .herd-art--bull { width: 100%; }
.al-card__who { font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #7a4a12; }
.al-card__title { font-size: clamp(24px, 6.4vw, 32px); font-weight: 900; line-height: 1.1; outline: none; overflow-wrap: anywhere; }
.al-scn { font-size: 18px; font-weight: 700; }
.al-signals { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.al-signals li { display: flex; gap: 10px; align-items: baseline; background: #fff; border-radius: 14px; padding: 8px 12px; font-size: 17px; line-height: 1.3; }
.al-signals b { flex: none; min-width: 78px; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #7a4a12; }
.al-box { border-radius: 16px; padding: 10px 14px; font-size: 17px; line-height: 1.35; background: #fff; }
.al-box > b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #7a4a12; }
.al-box--means { background: #eef7ff; }
.al-box--means q { font-size: 21px; font-weight: 900; quotes: none; display: block; }
.al-box--do { background: #eaf7e6; border: 3px solid #bfe3b8; font-weight: 800; font-size: 19px; }
.al-box--do.is-red { background: #fdecea; border-color: #f2b8b0; }
.al-box--do.is-yellow { background: #fff6d6; border-color: #f2d98a; }
.al-box--learn { background: #fff8dc; }
.al-safety { font-size: 15px; font-weight: 800; color: #7a2418; background: #fff; border-left: 6px solid var(--tl-red); border-radius: 12px; padding: 8px 12px; }
.al-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.al-nav .a-btn { width: 100%; font-size: 18px; padding: 8px 10px; }
.al-src { font-size: 13px; color: var(--ink-2); }
.al-src summary { cursor: pointer; font-weight: 800; min-height: 48px; display: flex; align-items: center; }
.al-src p { overflow-wrap: anywhere; }

/* quiz */
.al-qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 900; font-size: 16px; color: var(--ink-2); }
.al-qtype { font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--barn); border-radius: 999px; padding: 4px 12px; }
.al-q { font-size: clamp(22px, 6vw, 28px); font-weight: 900; line-height: 1.2; outline: none; }
.al-opts { display: flex; flex-direction: column; gap: 10px; }
.al-opt { width: 100%; justify-content: flex-start; text-align: left; font-size: 19px; line-height: 1.25; border-radius: 20px; padding: 12px 16px; white-space: normal; }
.al-opt__id { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--straw); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.al-fb { font-size: 17px; font-weight: 800; line-height: 1.35; border-radius: 16px; padding: 10px 14px; background: #fff; }
.al-fb:empty { display: none; }
.al-fb.is-good { background: #eaf7e6; color: #1d5c28; }
.al-fb.is-bad { background: #fff3e6; color: #7a3d00; }
.al-card .a-hear, .a-card > .a-hear { font-size: 20px; min-height: 52px; padding: 0 18px; align-self: flex-start; }
.a-card > .a-hear { align-self: flex-end; }