/* Gate Count: Fives & Tens */
.gc-hero { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 3vw, 16px); }
.gc-hero__img { width: clamp(80px, 24vw, 120px); height: clamp(80px, 24vw, 120px); border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow); background: #fff; }
.gc-hero__yard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #8fcf6a; border: 4px solid #fff; border-radius: 18px; padding: 10px 10px 8px; box-shadow: var(--shadow); }
.gc-hero__gate { width: 92px; height: 34px; background: repeating-linear-gradient(180deg, #9c6b3a 0 6px, transparent 6px 13px); border-left: 6px solid #6d4a26; border-right: 6px solid #6d4a26; }
.gc-hero__mob { font-size: clamp(14px, 4.2vw, 22px); letter-spacing: -2px; }

.gc-play { display: flex; flex-direction: column; gap: 12px; }
.gc-scene { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(104px, .7fr); align-items: stretch; min-height: 112px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 4px solid #fff; background: linear-gradient(180deg, #dff3ff 0 22%, #b7dd8f 22%); }
.gc-lanebox { position: relative; overflow: hidden; display: flex; align-items: center; padding: 8px 4px; background: linear-gradient(180deg, transparent 0 22%, #c9a86b 22% 100%); }
.gc-lane { width: 100%; display: flex; justify-content: center; }
.gc-mob { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; max-width: 150px; animation: gc-walk .8s ease-out both; }
.gc-mob.is-leaving { animation: gc-leave .8s ease-out both; }
.gc-cow { font-size: 24px; line-height: 1.15; display: inline-block; transform: scaleX(-1); }
.gc-mob.is-leaving .gc-cow { transform: none; }
@keyframes gc-walk { from { transform: translateX(-120%); } to { transform: none; } }
@keyframes gc-leave { from { transform: translateX(70%); opacity: .3; } to { transform: none; opacity: 1; } }
.gc-gate { position: relative; background: repeating-linear-gradient(180deg, #9c6b3a 0 8px, transparent 8px 18px); border-left: 7px solid #6d4a26; border-right: 7px solid #6d4a26; margin: 26px 0 6px; display: flex; align-items: flex-start; justify-content: center; }
.gc-sign { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); background: var(--straw); color: #3b2500; font-weight: 900; font-size: 17px; border-radius: 10px; padding: 1px 8px; border: 2px solid #fff; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.gc-sign:empty { display: none; }
.gc-yard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: linear-gradient(180deg, transparent 0 22%, #8fcf6a 22%); padding: 6px; }
.gc-yard__label { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #2b4a1e; }
.gc-yardcount { font-size: 40px; font-weight: 900; color: var(--barn); background: #fff; border-radius: 16px; min-width: 76px; text-align: center; line-height: 1.2; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.gc-yardcount.is-bump { animation: mf-bounce .5s ease; }
.gc-truck { position: absolute; left: 4px; bottom: 6px; font-size: 30px; line-height: 1; z-index: 1; }
.gc-scene.is-back .gc-lane { padding-left: 30px; }

.gc-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; min-height: 40px; }
.gc-chip { min-width: 42px; padding: 2px 8px; border-radius: 10px; background: #eaf7e6; border: 3px solid var(--green); text-align: center; font-size: 19px; font-weight: 900; animation: mf-in .25s ease-out; }
.gc-chip.is-start { background: #fff3c7; border-color: #c49000; }
.gc-chip.is-q { background: #fff; border-style: dashed; border-color: var(--wood); }
.gc-sep { color: var(--ink-2); font-weight: 900; font-size: 16px; }
.gc-choice { font-size: clamp(26px, 7.4vw, 38px); font-weight: 900; }

.gc-hands { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; background: rgba(255, 255, 255, .8); border-radius: 18px; padding: 8px; min-height: 64px; box-shadow: var(--shadow); }
.gc-hand { display: flex; flex-direction: column; align-items: center; min-width: 42px; animation: mf-in .3s ease-out; }
.gc-hand__e { font-size: 30px; line-height: 1.1; }
.gc-hand__n { font-size: 14px; font-weight: 900; color: var(--barn); }
.gc-hand__none { align-self: center; font-weight: 800; color: var(--ink-2); font-size: 16px; }

.gc-chartcard { background: var(--paper); border-radius: 18px; padding: 8px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.gc-chart { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 560px; margin: 0 auto; }
.gc-cell { aspect-ratio: 1.25; display: flex; align-items: center; justify-content: center; font-size: clamp(11px, 3.1vw, 15px); font-weight: 800; color: #7b8590; background: #f1ece2; border-radius: 6px; transition: background .25s, color .25s; }
.gc-cell.is-five { box-shadow: inset 0 0 0 2px #e3c98c; }
.gc-cell.is-ten { box-shadow: inset 0 0 0 2px #d4a95a; }
.gc-cell.is-full { background: #d9a066; color: #3b2500; }
.gc-cell.is-new { animation: gc-fill .5s ease both; }
.gc-cell.is-land { background: var(--barn); color: #fff; }
@keyframes gc-fill { from { transform: scale(.6); } to { transform: none; } }
.gc-chartnote { text-align: center; font-size: 15px; font-weight: 800; color: var(--ink-2); }