/* Baggage Rush pages: the site's shell (/styles.css) with the game's airport palette. */
:root{--br-sky:#DCEBF5;--br-navy:#1B2B4B;--br-yellow:#FFC83D;--br-yellow-deep:#D89B00;
  --br-red:#E5484D;--br-blue:#2F6FE0;--br-green:#2FB36D;--br-purple:#8B5CF6;--br-orange:#FF8A3D}
.br header.site a.brand{display:flex;align-items:center;gap:8px}
.br .tag{display:inline-block;font:600 12px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;
  background:var(--br-navy);color:var(--br-yellow);padding:6px 10px;border-radius:6px}
.br .pill.go{background:var(--br-yellow);color:var(--br-navy);box-shadow:0 4px 0 var(--br-yellow-deep)}

/* Hero: a little board with bags heading for their belts. */
.board{position:relative;background:var(--br-sky);border-radius:24px;padding:18px;margin:28px 0 8px;
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:6px;aspect-ratio:6/4.4;max-width:420px;
  border:6px solid var(--br-navy)}
.board .cell{border-radius:6px;background:rgba(27,43,75,.06)}
.bag{border-radius:8px;position:relative;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.bag::after{content:"";position:absolute;left:30%;right:30%;top:-5px;height:8px;border:3px solid var(--br-navy);
  border-bottom:0;border-radius:6px 6px 0 0;opacity:.7}
.bag i{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.9);font:700 15px/1 system-ui;font-style:normal}
.belt{position:absolute;height:10px;border-radius:5px;
  background:repeating-linear-gradient(90deg,var(--c) 0 10px,var(--br-navy) 10px 14px)}
.belt.v{width:10px;height:auto;background:repeating-linear-gradient(180deg,var(--c) 0 10px,var(--br-navy) 10px 14px)}
@media (prefers-reduced-motion:no-preference){
  .bag.slide{animation:slide 2.8s ease-in-out infinite}
  @keyframes slide{0%,30%{transform:translateY(0);opacity:1}60%{transform:translateY(calc(-100% - 26px));opacity:1}75%,100%{transform:translateY(calc(-100% - 26px));opacity:0}}
}

/* Departure board of features. */
.fids{background:var(--br-navy);color:#E9F1F8;border-radius:20px;padding:6px 18px;margin:24px 0;
  font:14px/1.5 ui-monospace,"SF Mono",Menlo,monospace}
.fids .row{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px 0;border-top:1px dashed rgba(255,255,255,.18)}
.fids .row:first-child{border-top:0}
.fids b{color:var(--br-yellow);font-weight:700}
.fids span{font-family:"DM Sans",system-ui,-apple-system,"PingFang SC",sans-serif;font-size:15px}
.fids em{display:block;font-style:normal;color:#A9BBD0;font-size:13px}

/* Boarding pass call to action. */
.pass{display:flex;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);margin:28px 0}
.pass .main{flex:1;padding:18px 20px}
.pass .stub{width:120px;padding:18px 14px;border-left:2px dashed var(--line);display:grid;place-items:center;text-align:center;
  font:600 13px/1.3 ui-monospace,"SF Mono",Menlo,monospace}
.pass .route{font:700 28px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;margin:6px 0}
@media (max-width:420px){.pass{flex-direction:column}.pass .stub{width:auto;border-left:0;border-top:2px dashed var(--line)}}
table.data{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0}
table.data th,table.data td{text-align:left;vertical-align:top;padding:8px 6px;border-top:1px solid var(--line)}
.appmark.bag-mark{background:linear-gradient(180deg,transparent 0 22%,var(--br-yellow) 22% 100%);border:0;border-radius:16px;
  position:relative;box-shadow:inset 0 -6px 0 var(--br-yellow-deep)}
.appmark.bag-mark::before{content:"";position:absolute;left:24px;right:24px;top:2px;height:14px;border:4px solid #1B2B4B;border-bottom:0;border-radius:8px 8px 0 0}
.appmark.bag-mark::after{content:"";position:absolute;left:10px;right:10px;bottom:14px;height:6px;
  background:repeating-linear-gradient(90deg,#1B2B4B 0 6px,transparent 6px 10px)}