.vd-game-final-approach { --game-color:#2f8fa8; }
.fa-game,.fa-board { --fa-ink:#1f3a4d; --fa-blue:#2f6fbf; --fa-orange:#e08a2b; --fa-sky:#8fd0ea; --fa-panel:#e9eef2; --fa-green:#2b9a63; color:var(--fa-ink); width:100%; min-width:0; }
.fa-game { max-width:640px; margin:0 auto; }
.fa-board { display:grid; gap:.8rem; margin-top:1rem; }
.fa-turn { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem .85rem .85rem; border-radius:16px; background:var(--vd-panel,#fffefa); box-shadow:inset 0 0 0 2px #dfe5f2; }
.fa-turn.is-act { box-shadow:inset 0 0 0 2px var(--fa-blue); } .fa-turn.is-done { box-shadow:inset 0 0 0 2px var(--fa-green); } .fa-turn.is-lost { box-shadow:inset 0 0 0 2px #c4411f; }
.fa-turn-avatar { width:3.25rem; height:3.25rem; flex:none; display:grid; place-items:center; } .fa-turn-avatar .pr-character { width:100%; height:100%; display:block; }
.fa-plane-mark { display:grid; place-items:center; width:100%; height:100%; border-radius:30%; background:var(--fa-sky); font-size:1.7rem; }
.fa-turn-text { display:grid; gap:.1rem; min-width:0; flex:1; } .fa-turn-text small { font-size:.72rem; font-weight:650; color:#536582; }
.fa-turn-text strong { font-size:clamp(1.1rem,2.4vw,1.5rem); line-height:1.2; font-weight:750; letter-spacing:-.02em; text-wrap:balance; }
.fa-chip { flex:none; padding:.3rem .65rem; border-radius:999px; font-size:.72rem; font-weight:750; background:#e1ecf9; color:var(--fa-blue); }
.fa-turn.is-done .fa-chip { background:#dcf1e6; color:#1f7a4c; } .fa-turn.is-lost .fa-chip { background:#fbe6e1; color:#b3412b; } .fa-turn.is-wait .fa-chip { background:#eeeae0; color:#68707a; }
.fa-action,.fa-result,.fa-waiting,.fa-hint { margin:0; padding:.6rem .8rem; border-radius:12px; background:#f4eddd; font-size:.9rem; font-weight:650; }
.fa-result.is-won { background:#dcf1e6; color:#1f7a4c; } .fa-result.is-lost { background:#fbe6e1; color:#9c3118; }
.fa-instruments { display:grid; grid-template-columns:1fr auto; gap:.6rem .8rem; padding:.7rem; border-radius:16px; background:#14283a; color:#e6f3fa; }
.fa-alt,.fa-track { display:flex; gap:.3rem; list-style:none; margin:0; padding:0; }
.fa-alt li { position:relative; flex:1; display:grid; place-items:center; height:2.1rem; border-radius:.5rem; background:#20405a; font-size:.9rem; opacity:.55; } .fa-alt li.is-now { background:var(--fa-sky); color:#14283a; opacity:1; box-shadow:0 0 0 2px #fff6; } .fa-alt li.is-past { opacity:.25; }
.fa-reroll-mark { position:absolute; top:-.45rem; right:-.15rem; font-style:normal; font-size:.8rem; color:#ffd36b; } .fa-reroll-mark.is-used { opacity:.3; }
.fa-track { grid-column:1; } .fa-track li { position:relative; flex:1; display:grid; justify-items:center; align-content:end; height:3.3rem; border-radius:.5rem; background:#20405a; padding-bottom:.15rem; font-size:.7rem; }
.fa-track li.is-airport { background:#31596f; } .fa-track li.is-here { box-shadow:inset 0 0 0 2px #ffd36b; } .fa-me { position:absolute; top:.1rem; font-style:normal; font-size:1.1rem; color:#ffd36b; }
.fa-traffic { color:#ff8f70; font-size:.6rem; letter-spacing:.05em; line-height:1; } .fa-track b { font-weight:700; opacity:.8; }
.fa-tokens { grid-row:1 / span 2; grid-column:2; display:grid; align-content:center; gap:.4rem; } .fa-token { display:flex; align-items:center; gap:.35rem; font-weight:800; } .fa-token i { font-style:normal; color:#ffd36b; }
.fa-cockpit { display:grid; gap:.7rem; padding:.8rem; border-radius:18px; background:var(--fa-panel); box-shadow:inset 0 0 0 2px #cfd9e0; }
.fa-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; }
.fa-horizon { display:grid; justify-items:center; } .fa-horizon svg { width:100%; max-width:11rem; height:auto; } .fa-horizon small,.fa-gauge small { font-size:.68rem; font-weight:700; color:#536582; }
.fa-gauge { display:grid; justify-items:center; gap:.2rem; } .fa-gauge ol { display:flex; gap:2px; list-style:none; margin:0; padding:0; width:100%; }
.fa-gauge li { flex:1; text-align:center; padding:.35rem 0; border-radius:.3rem; font-size:.72rem; font-weight:800; background:#cfd9e0; color:#3d556a; }
.fa-gauge li.is-one,.fa-gauge li.is-stop { background:#bfe3cf; color:#1f7a4c; } .fa-gauge li.is-two { background:#ffd9a8; color:#8a4b00; } .fa-gauge li.is-fast { background:#f6c8bd; color:#9c3118; }
.fa-gauge li.is-now { outline:3px solid var(--fa-ink); outline-offset:1px; }
.fa-cols { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; } .fa-col { display:grid; gap:.5rem; align-content:start; padding:.6rem; border-radius:12px; background:#fffefa; }
.fa-col.is-pilot { box-shadow:inset 0 0 0 2px #b9cff0; } .fa-col.is-co { box-shadow:inset 0 0 0 2px #f2d3ac; }
.fa-col h3 { margin:0; font-size:.85rem; display:flex; justify-content:space-between; gap:.4rem; } .fa-col h3 small { font-weight:600; color:#68707a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fa-line { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; } .fa-label { flex:1 0 100%; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#68707a; } .fa-coffee { background:#fffefa; border-radius:12px; padding:.6rem; }
.fa-coffee .fa-label { flex:1 0 100%; }
.fa-slot { position:relative; display:inline-grid; place-items:center; width:2.3rem; height:2.3rem; padding:0; border:2px solid; border-radius:.55rem; background:#fff; cursor:default; font:inherit; color:inherit; }
.fa-slot.is-pilot { border-color:var(--fa-blue); background:#eef4fd; } .fa-slot.is-co { border-color:var(--fa-orange); background:#fff5e8; } .fa-slot.is-both { border-color:transparent; background:linear-gradient(90deg,#eef4fd 50%,#fff5e8 50%); box-shadow:inset 0 0 0 2px #b9a98d; }
.fa-need { font-size:.68rem; font-weight:800; color:#68707a; }
.fa-slot.is-legal { cursor:pointer; box-shadow:0 0 0 3px #ffd36b, 0 0 14px #ffd36baa; animation:fa-glow 1.4s ease-in-out infinite; } .fa-slot:disabled { opacity:1; }
.fa-slot.is-filled { border-style:solid; }
.fa-light { position:absolute; right:-.2rem; top:-.2rem; width:.65rem; height:.65rem; border-radius:50%; background:#c4cdd4; box-shadow:0 0 0 2px #fff; } .fa-light.is-on { background:var(--fa-green); }
.fa-die.fd-die { width:2rem; height:2rem; padding:.25rem; border-radius:.5rem; box-shadow:0 2px 0 #cfccb8; } .fa-die .fd-pip { width:.28rem; height:.28rem; }
.fa-tray { position:sticky; bottom:.6rem; z-index:5; box-shadow:0 10px 30px #1f3a4d33, inset 0 0 0 2px #dfe5f2; background:var(--vd-panel,#fffefa); display:grid; gap:.7rem; padding:.8rem; border-radius:16px; background:var(--vd-panel,#fffefa); }
.fa-dice,.fa-covered { display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; }
.fa-dice .fd-die,.fa-covered .fd-die { width:3.6rem; height:3.6rem; padding:.5rem; border-radius:.9rem; } .fa-dice .fd-pip { width:.55rem; height:.55rem; }
.fa-die.is-back { background:repeating-linear-gradient(45deg,#2f6fbf,#2f6fbf 6px,#3f82d4 6px,#3f82d4 12px); border-color:#fffefa; }
.fa-dice .fd-die.is-held { transform:translateY(-.4rem); background:linear-gradient(160deg,#fff3c9,#f6d98a); border-color:#e0a22b; box-shadow:0 0 0 3px #e0a22b, 0 10px 14px #0003; }
.fa-coffee-adjust { display:flex; align-items:center; justify-content:center; gap:.8rem; } .fa-coffee-adjust[hidden] { display:none; }
.fa-step { width:2.6rem; height:2.6rem; border:0; border-radius:50%; background:#e1ecf9; color:var(--fa-blue); font-size:1.4rem; font-weight:800; cursor:pointer; } .fa-adjust-now { min-width:6rem; text-align:center; font-weight:800; }
.fa-confirm,.fa-reroll { width:100%; min-height:52px; justify-content:center; font-size:1rem; border-radius:999px; } .fa-form { margin:0; display:grid; gap:.6rem; } .fa-cancel { justify-self:center; background:none; border:0; cursor:pointer; }
.fa-needs { display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; } .fa-needs li { padding:.25rem .6rem; border-radius:999px; font-size:.75rem; font-weight:750; } .fa-needs .is-ok { background:#dcf1e6; color:#1f7a4c; } .fa-needs .is-no { background:#fbe6e1; color:#9c3118; }
.fa-board-tv { max-width:64rem; margin-inline:auto; } .fa-board-tv .fa-slot { width:3.4rem; height:3.4rem; }
@keyframes fa-glow { 50% { box-shadow:0 0 0 3px #ffd36b, 0 0 22px #ffd36b; } }
@media (prefers-reduced-motion: reduce) { .fa-slot.is-legal { animation:none; } }