/* Alien Clash: Color Chaos — game styles (Gaimo.in) */
:root{
  --s:.7;
  /* palette sampled from the title art */
  --night:#140a33; --deep:#24124a; --violet:#3b1f86; --violet-2:#5a35c4; --lilac:#c9b8ff;
  --cyan:#3ee8ff; --sky:#8fe6ff; --lime:#8ef04a; --lime-deep:#2f8a12; --leaf:#1f6e0b;
  --gold:#ffcf3a; --gold-deep:#a86b00; --pink:#ff5fb0; --cream:#fff7ff;
  --ink:#2a1650; --ink-soft:#5d4a8f;
  --glass:rgba(24,12,62,.74); --glass-line:rgba(201,184,255,.38);
  --desk:#2a1763; --desk-2:#0d0626; --notes-ink:#efe8ff; --notes-soft:#b9a9e8; --notes-head:#8ef04a;
}
*{ box-sizing:border-box; }
html,body{
  height:100%; margin:0; width:100%; overflow:hidden;
  font-family:'Fredoka',system-ui,sans-serif; font-weight:500; color:var(--ink);
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
body{
  display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none;
  background:radial-gradient(120% 90% at 50% 35%, var(--desk) 0%, var(--desk-2) 100%);
}
button{ font:inherit; color:inherit; }
kbd{
  display:inline-block; min-width:22px; padding:0 6px 1px; margin:0 1px;
  font:inherit; font-size:14px; font-weight:600; line-height:20px; text-align:center;
  background:#fff; color:var(--ink); border:2px solid var(--violet); border-bottom-width:4px; border-radius:7px;
}
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- stage: authored at 450x800 (9:16) and scaled as a unit ---------- */
#stage{ position:relative; flex:none; width:calc(450px * var(--s)); height:calc(800px * var(--s)); }
#gameWrap{
  position:absolute; left:0; top:0; width:450px; height:800px; transform-origin:0 0; transform:scale(var(--s,1));
  background:#2b1766; overflow:hidden; border-radius:22px; touch-action:none;
  box-shadow:0 0 0 4px var(--violet), 0 10px 0 4px #22104f, 0 26px 50px rgba(0,0,0,.45);
}
canvas#c{ position:absolute; left:0; top:0; display:block; width:450px; height:800px; touch-action:none; cursor:grab; }
canvas#c.grabbing{ cursor:grabbing; }
.fx-flash{ position:absolute; inset:0; pointer-events:none; background:#dff8ff; opacity:0; mix-blend-mode:screen; }

/* ---------- HUD ---------- */
.hud{ position:absolute; left:8px; right:8px; top:8px; pointer-events:none; transition:opacity .3s; }
.hudTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.hudL{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.chip{
  display:flex; align-items:center; gap:6px; color:#fff; background:var(--glass);
  border:2px solid var(--glass-line); border-radius:14px; padding:4px 10px 5px; line-height:1;
  box-shadow:0 3px 0 rgba(10,4,30,.55);
}
.lvl{ font-family:'Lilita One',sans-serif; font-size:17px; letter-spacing:.3px; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvl small{ font-family:'Fredoka',sans-serif; font-weight:500; font-size:13px; opacity:.8; margin-left:4px; }
.lives{ gap:3px; padding:4px 8px; }
.lives:empty{ display:none; }
.lives i{
  width:17px; height:17px; border-radius:50%; display:block; position:relative;
  background:radial-gradient(circle at 35% 30%, #c9fff0 0 14%, #42e3c4 30%, #13917e 100%);
  transition:transform .25s, opacity .25s, filter .25s;
}
.lives i::after{ content:''; position:absolute; left:4px; top:6px; width:9px; height:4px; border-radius:0 0 5px 5px; background:#0b3d36; }
.lives i.lost{ opacity:.35; filter:grayscale(1); transform:scale(.78) rotate(14deg); }
.timer{ font-family:'Lilita One',sans-serif; font-size:20px; min-width:70px; justify-content:center; letter-spacing:.5px; }
.timer.limit{ color:#fff; }
.timer.low{ background:#ff3d6e; border-color:#ffd0dc; animation:pulse .8s ease-in-out infinite; }
.timer.hidden{ visibility:hidden; }
.tools{ display:flex; gap:5px; pointer-events:auto; }
.tool{
  width:36px; height:36px; padding:0; cursor:pointer; display:grid; place-items:center;
  background:var(--glass); border:2px solid var(--glass-line); border-radius:50%; box-shadow:0 3px 0 rgba(10,4,30,.55);
}
.tool:hover{ border-color:#fff; }
.tool:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(10,4,30,.55); }
.tool svg{ width:19px; height:19px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.tool.off .wave{ display:none; } .tool .cross{ display:none; } .tool.off .cross{ display:block; }
.tool.off{ opacity:.7; }

/* colour goals */
.goals{ display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:7px; }
.goal{
  position:relative; display:flex; align-items:center; gap:4px; padding:3px 7px 3px 4px; border-radius:12px;
  background:var(--glass); border:2px solid var(--glass-line); color:#fff; font-size:14px; font-weight:600; line-height:1;
  transition:transform .25s, background .25s, border-color .25s;
}
.goal b{ font-family:'Lilita One',sans-serif; font-weight:400; font-size:15px; }
.goal small{ font-size:11px; opacity:.8; }
.goal .bar{ position:absolute; left:6px; right:6px; bottom:1px; height:3px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.goal .bar i{ display:block; height:100%; width:0; background:var(--c,#fff); transition:width .3s; }
.goal.done{ border-color:var(--gold); background:rgba(70,40,10,.78); }
.goal.done b::after{ content:' \2713'; color:var(--gold); }
.goal.bump{ transform:scale(1.18); }
.mini{
  width:20px; height:20px; border-radius:50% 50% 46% 46%; flex:none; position:relative;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.75) 0 10%, transparent 26%), var(--c,#888);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);
}
.mini::before, .mini::after{ content:''; position:absolute; top:6px; width:5px; height:6px; border-radius:50%; background:#fff; box-shadow:inset 1px 1px 0 1px #1d0f30; }
.mini::before{ left:4px; } .mini::after{ right:4px; }
.mini.cyc::after{ display:none; } .mini.cyc::before{ left:6px; width:8px; height:8px; top:4px; }

/* ---------- bottom dock ---------- */
.dock{ position:absolute; left:8px; right:8px; bottom:9px; display:flex; align-items:flex-end; justify-content:space-between; pointer-events:none; transition:opacity .3s; }
.abilities{ display:flex; gap:7px; }
.ab, .hintBtn{
  pointer-events:auto; position:relative; width:66px; padding:5px 0 5px; display:flex; flex-direction:column; align-items:center; gap:1px; cursor:pointer;
  font-family:'Lilita One',sans-serif; font-size:13px; line-height:1.05; color:#fff; letter-spacing:.2px;
  background:var(--glass); border:2px solid var(--glass-line); border-radius:16px; box-shadow:0 3px 0 rgba(10,4,30,.55);
  transition:transform .12s, opacity .2s, border-color .2s, background .2s;
}
.ab svg, .hintBtn svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ab .n{
  position:absolute; top:-7px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:12px; line-height:17px; text-align:center;
  background:var(--gold); color:#3a2300; border:2px solid #fff;
}
.ab kbd{ position:absolute; top:-7px; left:-6px; font-size:10px; line-height:13px; min-width:15px; padding:0 3px; border-width:1.5px; border-bottom-width:2.5px; border-radius:5px; }
.ab .cd{ position:absolute; inset:0; border-radius:14px; pointer-events:none; background:conic-gradient(rgba(10,4,30,.62) var(--p,0%), transparent 0); }
.ab:active, .hintBtn:active{ transform:translateY(3px); }
.ab.empty{ opacity:.42; cursor:not-allowed; }
.ab.on{ border-color:var(--cyan); background:rgba(30,120,160,.8); animation:pulse .7s ease-in-out infinite; }
.ab.slow svg{ stroke:#9ef0ff; } .ab.calm svg{ stroke:#b6ff8a; } .ab.rescue svg{ stroke:#ffd76a; }
.hintBtn svg{ stroke:var(--gold); }
.hintBtn.cool{ opacity:.5; }
@media (pointer:coarse){ .ab kbd{ display:none; } }

/* ---------- marks over the 3D scene ---------- */
.marks{ position:absolute; inset:0; pointer-events:none; }
.dmark{
  position:absolute; left:0; top:0; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
  display:grid; place-items:center; font-family:'Lilita One',sans-serif; font-size:19px; line-height:1; color:#fff;
  background:radial-gradient(circle, rgba(10,40,70,.88) 0 56%, transparent 58%),
             conic-gradient(var(--ring,#7fe6ff) var(--p,100%), rgba(255,255,255,.18) 0);
  text-shadow:0 2px 0 rgba(0,0,0,.4); will-change:transform; transition:opacity .2s;
}
.dmark.warm{ --ring:#a6efff; font-size:15px; }
.dmark.hot{ --ring:#ff5d7d; animation:shake .25s linear infinite; }
.dmark.charged::after{ content:'\26A1'; position:absolute; right:-7px; top:-8px; font-size:15px; }
.cmark{
  position:absolute; left:0; top:0; padding:2px 7px 3px; transform-origin:50% 100%; border-radius:10px; white-space:nowrap;
  font-size:13px; font-weight:600; line-height:1.1; color:#fff; background:rgba(24,12,62,.78); border:2px solid var(--c,#fff);
  will-change:transform;
}
.qmark{
  position:absolute; left:0; top:0; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  display:grid; place-items:center; font-family:'Lilita One',sans-serif; font-size:15px; color:#3a2300;
  background:var(--gold); border:2px solid #fff; will-change:transform; animation:bob 1s ease-in-out infinite;
}
.smark{ position:absolute; left:0; top:0; width:58px; height:24px; margin:-12px 0 0 -29px; border:3px dashed #fff; border-radius:50%; will-change:transform; animation:spin 3s linear infinite; }
.hand{
  position:absolute; left:0; top:0; width:46px; height:46px; margin:-6px 0 0 -14px; pointer-events:none; opacity:0;
  transition:opacity .3s; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.hand svg{ width:100%; height:100%; fill:#fff; stroke:var(--violet); stroke-width:2.5; stroke-linejoin:round; }
.hand.show{ opacity:1; }

/* ---------- messages ---------- */
.tip{
  position:absolute; left:50%; bottom:92px; width:330px; transform:translate(-50%,10px); text-align:center;
  font-size:16px; line-height:1.28; color:var(--ink); background:var(--cream); border:3px solid var(--violet); border-radius:18px;
  padding:8px 14px 9px; box-shadow:0 5px 0 var(--violet), 0 14px 26px rgba(0,0,0,.25);
  opacity:0; transition:opacity .3s, transform .3s; pointer-events:none;
}
.tip.show{ opacity:1; transform:translate(-50%,0); }
.tip b{ color:var(--violet-2); }
.tip kbd{ font-size:12px; line-height:16px; min-width:18px; }
.toast{
  position:absolute; left:50%; top:300px; transform:translate(-50%,-50%) scale(.6); pointer-events:none; white-space:nowrap;
  font-family:'Lilita One',sans-serif; font-size:40px; line-height:1; color:#fff; letter-spacing:.5px;
  text-shadow:0 3px 0 var(--violet), 0 0 18px rgba(62,232,255,.8), 0 6px 14px rgba(0,0,0,.4);
  opacity:0; transition:opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1);
}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.toast.bad{ text-shadow:0 3px 0 #7a0f33, 0 0 18px rgba(255,80,120,.8), 0 6px 14px rgba(0,0,0,.4); }
.toast small{ display:block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px; letter-spacing:0; margin-top:6px; text-shadow:0 2px 0 rgba(0,0,0,.45); }
.banner{
  position:absolute; left:50%; top:190px; transform:translate(-50%,-16px); pointer-events:none; text-align:center; min-width:280px;
  background:linear-gradient(180deg,#ffe07a,#ffbf2a); color:#2a1650; padding:9px 22px 11px; border-radius:16px; border:3px solid #fff;
  box-shadow:0 6px 0 var(--gold-deep), 0 16px 30px rgba(0,0,0,.3); opacity:0; transition:opacity .35s, transform .35s;
}
.banner.show{ opacity:1; transform:translate(-50%,0); }
.banner small{ display:block; font-weight:600; font-size:14px; letter-spacing:1px; }
.banner b{ display:block; font-family:'Lilita One',sans-serif; font-weight:400; font-size:30px; line-height:1.05; }
.banner span{ display:block; font-size:15px; font-weight:600; margin-top:3px; }

/* ---------- overlays ---------- */
.overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(14,6,40,.55);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility 0s linear .35s;
}
.overlay.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s ease, visibility 0s; }
.board{
  position:relative; width:370px; max-height:760px; overflow:auto; text-align:center;
  background:linear-gradient(180deg,#ffffff 0%, #f1e9ff 100%); border:4px solid var(--violet); border-radius:28px;
  padding:18px 22px 20px; box-shadow:0 8px 0 var(--violet), 0 26px 44px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.96); transition:transform .45s cubic-bezier(.2,1.4,.4,1);
}
.board.wide{ width:410px; }
.overlay.show .board{ transform:none; }
.board h1{ font-family:'Lilita One',sans-serif; font-weight:400; font-size:38px; line-height:1.02; margin:2px 0 6px; color:var(--violet-2); text-shadow:0 3px 0 rgba(59,31,134,.18); }
.board .sub{ font-size:17px; line-height:1.3; margin:0 0 12px; color:var(--ink-soft); }
.kicker{ margin:0; font-weight:600; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); }
.diff{ display:inline-block; margin:0 0 10px; padding:3px 12px 4px; border-radius:20px; font-size:14px; font-weight:600; color:#fff; background:var(--violet-2); }
.diff.d1{ background:#2fae5b; } .diff.d2{ background:#55a51f; } .diff.d3{ background:#c98a00; } .diff.d4{ background:#e0631b; } .diff.d5{ background:#d8304f; } .diff.d6{ background:#8a1fb8; }
.introGoals{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 12px; }
.introGoals .goal{ background:var(--deep); }
.news{ font-size:16px; line-height:1.36; text-align:left; margin:0 0 12px; color:var(--ink); }
.news p{ margin:0 0 7px; }
.news b{ color:var(--violet-2); }
.news .new{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#fff; background:var(--pink); padding:1px 7px 2px; border-radius:8px; margin-right:4px; vertical-align:1px; }
.how{ font-size:14px; line-height:1.35; color:var(--ink-soft); background:#e9dfff; border-radius:14px; padding:7px 10px; margin:0 0 14px; }
.touch-only{ display:none; }
@media (pointer:coarse){ .kbd-only{ display:none; } .touch-only{ display:inline; } }

button.primary{
  font-family:'Lilita One',sans-serif; font-size:28px; line-height:1; color:#fff; cursor:pointer; letter-spacing:.5px;
  text-shadow:0 2px 0 var(--leaf); padding:11px 38px 13px; border-radius:22px; border:3px solid var(--leaf);
  background:linear-gradient(180deg,#c4ff8a 0%, var(--lime) 22%, #3fb51b 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(20,90,8,.35), 0 6px 0 var(--leaf);
  transition:transform .1s, box-shadow .1s;
}
button.primary:hover{ transform:translateY(-2px); }
button.primary:active{ transform:translateY(4px); box-shadow:inset 0 3px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(20,90,8,.35), 0 2px 0 var(--leaf); }
button.ghost{
  font-size:17px; background:none; border:none; color:var(--ink-soft); cursor:pointer; margin-top:12px; padding:2px 8px;
  text-decoration:underline; text-decoration-color:var(--lilac); text-decoration-thickness:3px; text-underline-offset:5px;
}
button:focus-visible, .tool:focus-visible{ outline:3px dashed var(--cyan); outline-offset:3px; }
.stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; margin:4px 0 14px; font-size:15px; color:var(--ink-soft); }
.stats span{ white-space:nowrap; }
.stats b{ font-family:'Lilita One',sans-serif; font-weight:400; font-size:21px; color:var(--violet-2); margin-right:3px; }
.board.over h1{ color:#d8304f; }
.board.win{ background:linear-gradient(180deg,#fffbe8 0%, #ffeec2 100%); border-color:var(--gold-deep); box-shadow:0 8px 0 var(--gold-deep), 0 26px 44px rgba(0,0,0,.4); }
.board.win h1{ color:#7a3dff; font-size:36px; }
.board.win.final h1{ font-size:34px; background:linear-gradient(90deg,#ff4b6e,#ff9f1c,#ffd23a,#58d23a,#2fd8d0,#3f7dff,#a45cff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.stars{ display:flex; justify-content:center; gap:8px; margin:2px 0 8px; }
.stars i{
  width:46px; height:46px; display:block; background:#e2d6b3;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transform:scale(.4); opacity:.5; transition:transform .5s cubic-bezier(.2,1.8,.4,1), opacity .3s, background .3s;
}
.stars i:nth-child(2){ width:56px; height:56px; margin-top:-8px; }
.stars i.on{ background:linear-gradient(180deg,#fff3a0,#ffc21a 60%,#f08a00); transform:scale(1); opacity:1; }

/* title screen */
#titleOverlay{ background:#1d0f45; }
.title{
  position:absolute; inset:0; background:url('../assets/splash-menu.webp') center/cover no-repeat;
}
.paintedPlay{
  position:absolute; left:113px; top:616px; width:224px; height:72px; border-radius:40px; cursor:pointer;
  background:transparent; border:0; box-shadow:0 0 0 0 rgba(142,240,74,.0); animation:playGlow 1.8s ease-in-out infinite;
}
.paintedPlay:hover{ background:rgba(255,255,255,.12); }
.paintedPlay:active{ transform:translateY(3px); }
.titleLevels{
  position:absolute; left:50%; top:712px; transform:translateX(-50%); cursor:pointer;
  font-family:'Lilita One',sans-serif; font-size:20px; letter-spacing:.5px; color:#fff; padding:7px 22px 8px;
  background:rgba(24,12,62,.72); border:2px solid rgba(255,255,255,.6); border-radius:20px; text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.titleLevels:hover{ background:rgba(59,31,134,.9); }

/* level picker */
.levelGrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:6px 0 4px; }
.lv{
  position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer; text-align:left;
  background:#fff; border:3px solid var(--lilac); border-radius:16px; box-shadow:0 4px 0 var(--lilac); transition:transform .1s;
}
.lv:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--violet-2); }
.lv .num{ flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; font-family:'Lilita One',sans-serif; font-size:21px; color:#fff; background:var(--violet-2); }
.lv .nm{ display:block; font-size:14px; font-weight:600; line-height:1.15; color:var(--ink); }
.lv .st{ display:block; font-size:13px; letter-spacing:1px; color:#e0a400; margin-top:2px; }
.lv .st i{ font-style:normal; color:#d8cdea; }
.lv:disabled{ cursor:not-allowed; opacity:.55; background:#efe9fa; }
.lv:disabled .num{ background:#a99bc9; }
.lv.cur{ border-color:var(--lime-deep); box-shadow:0 4px 0 var(--lime-deep); }
.lv.cur .num{ background:#3fb51b; }

/* ---------- margin notes for mouse players on wide screens ---------- */
.notes{ display:none; position:absolute; left:calc(100% + 38px); top:50%; width:240px; transform:translateY(-50%); font-size:17px; line-height:1.3; color:var(--notes-ink); }
.notes h2{ font-family:'Lilita One',sans-serif; font-weight:400; font-size:32px; margin:0 0 10px; color:var(--notes-head); }
.notes ul{ list-style:none; margin:0; padding:0; }
.notes li{ margin:0 0 12px; }
.notes li b{ font-weight:600; }
.notes li span{ display:block; margin-top:3px; color:var(--notes-soft); font-weight:400; }
.notes kbd{ font-size:13px; }
@media (min-width:1000px) and (pointer:fine){ .notes{ display:block; } }

/* hidden while a menu is up */
#gameWrap.menu .hud, #gameWrap.menu .dock{ opacity:0; pointer-events:none; }
#gameWrap.menu .hud *, #gameWrap.menu .dock *{ pointer-events:none !important; }

@keyframes pulse{ 50%{ transform:scale(1.07); } }
@keyframes shake{ 25%{ translate:-1px 0; } 75%{ translate:1px 0; } }
@keyframes bob{ 50%{ translate:0 -4px; } }
@keyframes spin{ to{ rotate:360deg; } }
@keyframes playGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(170,255,120,.55); } 60%{ box-shadow:0 0 0 14px rgba(170,255,120,0); } }
@media (prefers-reduced-motion: reduce){
  .board, .tip, .overlay, .toast, .banner{ transition:none; }
  .timer.low, .ab.on, .dmark.hot, .qmark, .smark, .paintedPlay{ animation:none; }
}

/* ---------- link back to the site (hidden when the game is embedded in a page) ---------- */
html.standalone body{ padding-top:calc(env(safe-area-inset-top,0px) + 38px); }
.backbar{ display:none; }
html.standalone .backbar{
  display:flex; align-items:center; gap:12px; position:fixed; z-index:10; left:0; right:0;
  top:env(safe-area-inset-top,0px); height:38px; padding:0 14px;
  background:rgba(24,12,62,.92); border-bottom:3px solid var(--violet);
  font-size:15px; font-weight:600; color:#fff;
}
.backbar a{ color:#fff; text-decoration:none; }
.backbar a:hover{ text-decoration:underline; }
.backbar .brand{ font-family:'Lilita One',sans-serif; font-weight:400; font-size:19px; letter-spacing:.3px; }
.backbar .sep{ opacity:.45; }
.backbar .spacer{ flex:1; }