/* Siphonry — the tank. One card holds the whole app: no top bar, no tab bar; the title and the routes
   live inside the object. Ground is near-black, one accent (acid lime), everything else is chrome grey. */
:root{
  --ground:#0A0C07; --ink:#ECF3DF; --lime:#A3FF12; --lime-dim:#6E9E1B;
  --chrome:#9BA3A0; --chrome-lo:#5A615C; --cell:#12160D; --cell-edge:#242B1B; --rule:#1C2214;
  --unit-w:min(560px, 100vw - 20px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground); color:var(--ink);
  font:400 15px/1.5 Sora, system-ui, -apple-system, sans-serif;
  min-height:100dvh; display:flex; justify-content:center;
  background-image:radial-gradient(120% 60% at 50% -10%, #131A0C 0%, var(--ground) 62%);
}
#sy-shell{width:var(--unit-w); padding:10px 0 26px; display:flex; flex-direction:column; gap:10px}
a{color:inherit}

/* ---------- the unit: the one object ---------- */
.sy-unit{
  background:linear-gradient(180deg,#0F1409 0%,#0B0F08 100%);
  border:1px solid var(--cell-edge); border-radius:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -30px #000;
  overflow:hidden; display:flex; flex-direction:column; min-height:min(700px, 90dvh);
}
.sy-unit__loading{padding:80px 20px; text-align:center; color:var(--chrome-lo); font-size:13px}

.sy-crest{display:flex; align-items:center; gap:9px; padding:13px 16px 11px; border-bottom:1px solid var(--rule)}
.sy-crest__mark{width:25px;height:25px;border-radius:50%;flex:none}
.sy-crest__word{
  font:900 15px/1 Unbounded, Sora, sans-serif; letter-spacing:.14em;
  background:linear-gradient(180deg,#F4F8EE 30%,#8A918B 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sy-crest__spacer{flex:1}
.sy-crest__round{font:600 11px/1 Sora,sans-serif; color:var(--chrome-lo); letter-spacing:.16em; text-transform:uppercase}
.sy-crest__phase{
  font:600 10px/1 Sora,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 8px; border-radius:999px; border:1px solid var(--cell-edge); color:var(--chrome);
}
.sy-crest__phase[data-p="joining"]{color:var(--lime); border-color:#3C5410; background:#151E08}
.sy-crest__phase[data-p="drawing"]{color:var(--lime); border-color:#3C5410; background:#151E08; animation:sy-breathe 2.4s ease-in-out infinite}
.sy-crest__phase[data-p="dry"]{color:#FF7A5E; border-color:#43221A; background:#1A0D09}
@keyframes sy-breathe{50%{box-shadow:0 0 0 3px rgba(163,255,18,.07)}}

/* ---------- the instrument: multiple + tank ---------- */
.sy-gauge{padding:18px 16px 14px}
.sy-gauge__mult{
  font:900 62px/.82 Unbounded, Sora, sans-serif; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--lime);
  text-shadow:0 0 34px rgba(163,255,18,.28); display:flex; align-items:baseline; gap:4px;
}
.sy-gauge__mult small{font:700 20px/1 Unbounded,Sora,sans-serif; color:var(--lime-dim); letter-spacing:0}
.sy-gauge__cap{margin-top:7px; font-size:12px; color:var(--chrome-lo)}
.sy-gauge__cap b{color:var(--chrome); font-weight:600}

.sy-rail{margin-top:14px; height:12px; border-radius:3px; background:#0B0F07; border:1px solid var(--cell-edge); overflow:hidden; position:relative}
.sy-rail__fluid{
  height:100%; width:0; transition:width .7s cubic-bezier(.3,.9,.3,1);
  background:linear-gradient(90deg,#4E7A0B 0%, var(--lime) 92%);
  box-shadow:0 0 18px rgba(163,255,18,.35);
}
.sy-rail__ticks{position:absolute;inset:0;display:flex}
.sy-rail__ticks i{flex:1;border-right:1px solid rgba(10,12,7,.85)}
.sy-rail__ticks i:last-child{border:0}
.sy-railline{display:flex; justify-content:space-between; margin-top:7px; font-size:11px; color:var(--chrome-lo); letter-spacing:.06em}
.sy-railline b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- the board of seats ---------- */
.sy-board{padding:6px 16px 10px; flex:1}
.sy-board__hd{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0 10px; border-top:1px solid var(--rule)}
.sy-board__hd h2{font:600 10px/1 Sora,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--chrome-lo)}
.sy-board__hd span{font-size:11px; color:var(--chrome-lo); font-variant-numeric:tabular-nums}
.sy-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
@media(min-width:460px){.sy-grid{grid-template-columns:repeat(6,1fr)}}
.sy-seat{
  aspect-ratio:1/1; border-radius:9px; border:1px solid var(--cell-edge); background:var(--cell);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:9px; color:var(--chrome-lo); overflow:hidden; position:relative; text-align:center;
}
.sy-seat--in{
  border-color:#3F5A11; color:#CBE79A;
  background:linear-gradient(180deg,#1B2A08 0%,#101806 100%);
  box-shadow:0 0 0 1px rgba(163,255,18,.07) inset;
}
.sy-seat--in::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg, rgba(163,255,18,.35), rgba(163,255,18,.08));
}
.sy-seat--out{opacity:.62}
.sy-seat--me{outline:2px solid var(--lime); outline-offset:-2px}
.sy-seat__who{font:600 9px/1 Sora,sans-serif; letter-spacing:.02em; position:relative; z-index:1}
.sy-seat__at{font:700 11px/1 Unbounded,Sora,sans-serif; color:var(--chrome); font-variant-numeric:tabular-nums; position:relative; z-index:1}
.sy-seat--out .sy-seat__at{color:#77807A}
.sy-seat--empty{border-style:dashed; border-color:#1B2113; background:transparent}
.sy-board__none{padding:26px 0 30px; text-align:center; color:var(--chrome-lo); font-size:12px}

/* ---------- the tap: the one action ---------- */
.sy-tap{padding:12px 16px 14px}
.sy-tap__btn{
  width:100%; border:0; border-radius:13px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:700 15px/1 Unbounded, Sora, sans-serif; letter-spacing:.06em; text-transform:uppercase;
  padding:17px 14px; color:#0A0C07;
  background:linear-gradient(180deg,#C6FF57 0%, var(--lime) 48%, #7FD400 100%);
  box-shadow:0 0 30px -6px rgba(163,255,18,.45), 0 1px 0 rgba(255,255,255,.5) inset;
  transition:transform .12s ease, filter .2s ease;
}
.sy-tap__btn:active{transform:translateY(1px) scale(.995)}
.sy-tap__btn[disabled]{
  background:linear-gradient(180deg,#242B1B,#171C11); color:#6C746B; cursor:default; box-shadow:none;
}
.sy-tap__btn--armed{
  background:linear-gradient(180deg,#FFF2B0 0%,#FFD84D 50%,#E0A800 100%);
  animation:sy-arm 1s ease-in-out infinite;
}
@keyframes sy-arm{50%{box-shadow:0 0 34px -4px rgba(255,216,77,.55), 0 1px 0 rgba(255,255,255,.5) inset}}
.sy-tap__note{margin-top:9px; font-size:11.5px; color:var(--chrome-lo); text-align:center; min-height:16px}
.sy-tap__note b{color:var(--lime); font-weight:600}
.sy-tap__note--warn b{color:#FF9E7A}

/* ---------- routes live inside the object ---------- */
.sy-routes{display:flex; border-top:1px solid var(--rule); background:#0A0E07}
.sy-routes a{
  flex:1; text-align:center; padding:13px 4px 15px; text-decoration:none;
  font:600 10px/1 Sora,sans-serif; letter-spacing:.17em; text-transform:uppercase; color:var(--chrome-lo);
  border-right:1px solid var(--rule);
}
.sy-routes a:last-child{border-right:0}
.sy-routes a[aria-current]{color:var(--lime); box-shadow:0 2px 0 var(--lime) inset}

/* ---------- secondary routes ---------- */
.sy-scroll{padding:16px; overflow-y:auto; flex:1}
.sy-h{font:700 19px/1.15 Unbounded, Sora, sans-serif; letter-spacing:-.01em; margin-bottom:6px}
.sy-lede{font-size:13px; color:var(--chrome); margin-bottom:16px}
.sy-row{
  display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--rule); font-size:12.5px;
}
.sy-row:last-child{border-bottom:0}
.sy-row__id{font:700 12px/1 Unbounded,Sora,sans-serif; color:var(--chrome-lo); width:44px; flex:none}
.sy-row__main{flex:1; min-width:0}
.sy-row__main em{font-style:normal; color:var(--chrome-lo)}
.sy-row__num{font:700 13px/1 Unbounded,Sora,sans-serif; font-variant-numeric:tabular-nums; color:var(--lime); flex:none}
.sy-row__num--cold{color:var(--chrome-lo)}
.sy-rule{padding:14px 0; border-bottom:1px solid var(--rule)}
.sy-rule:last-child{border-bottom:0}
.sy-rule h3{font:700 13px/1.2 Unbounded,Sora,sans-serif; color:var(--lime); margin-bottom:6px}
.sy-rule p{font-size:13px; color:#B9C2AE}
.sy-sums{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px}
.sy-sum{border:1px solid var(--cell-edge); border-radius:11px; padding:11px 10px; background:var(--cell)}
.sy-sum b{display:block; font:700 17px/1 Unbounded,Sora,sans-serif; font-variant-numeric:tabular-nums; margin-bottom:5px}
.sy-sum span{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--chrome-lo)}
.sy-mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; color:var(--chrome)}
.sy-tape{margin-top:18px}
.sy-tape li{list-style:none; display:flex; gap:9px; padding:7px 0; font-size:11.5px; color:var(--chrome-lo); border-bottom:1px solid #141A0E}
.sy-tape li b{color:var(--ink); font-weight:600}
.sy-empty{padding:34px 0; text-align:center; color:var(--chrome-lo); font-size:12.5px}

/* ---------- under the card ---------- */
.sy-under{display:flex; flex-wrap:wrap; align-items:center; gap:9px 10px; padding:0 6px}
.sy-under__ca{
  flex:1 1 100%; min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; color:var(--chrome-lo);
  overflow-wrap:anywhere; cursor:pointer; letter-spacing:-.01em;
}
.sy-under__buy{
  flex:none; margin-left:auto; text-decoration:none; font:600 10px/1 Sora,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lime); border:1px solid #3C5410; border-radius:999px; padding:9px 13px; background:#121A07;
}