/* Moon Crew progression: the character / inventory screen, the backpack button, reward pictures in the HUD.
   Same sticker look as style.css (navy frame like the base map, cream cards, 2.5px ink lines, Fredoka numbers). */

.res.r-beads { background: #F7B35B; } .res.r-crystal { background: #ECE8FF; }

.rooms-modal { position: absolute; inset: 0; z-index: 48; display: grid; place-items: center; padding: .4rem calc(.45rem + env(safe-area-inset-right)) .4rem calc(.45rem + env(safe-area-inset-left)); background: rgba(5, 7, 15, .72); }
.rooms-modal .ic.big { width: 100%; height: 100%; }
.rm-head { position: relative; z-index: 6; display: flex; align-items: center; gap: .4rem; height: 2.6rem; flex: none; }
.rm-head .grow { flex: 1; }
.rm-head .rb { width: 2.4rem; height: 2.4rem; font-size: 1.45rem; border-width: 2.5px; }
.rm-head .rb .ic { width: 1.3rem; height: 1.3rem; }
.rm-badge { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--cream); border: 2.5px solid var(--ink); display: grid; place-items: center; overflow: hidden; flex: none; }
.rm-badge .ic { width: 1.7rem; height: 1.7rem; }
.rm-badge.img img { width: 100%; height: 100%; object-fit: cover; transform: scale(.84); }
.pillc { display: inline-flex; align-items: center; gap: .15rem; height: 1.7rem; padding: 0 .5rem 0 .2rem; border-radius: .85rem; background: var(--cream); border: 2.5px solid var(--ink); font: 700 1rem Fredoka, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pillc .ic { width: 1.2rem; height: 1.2rem; }
.pillc.ok { background: #bfe8c4; }

/* ---------- character and inventory ---------- */
.inv.panel { width: min(100%, 64rem); height: min(100%, 30rem); max-width: none; max-height: none; display: flex; flex-direction: column; gap: .35rem; background: var(--navy); border-radius: 1.7rem; padding: .55rem .8rem .55rem; border: 3px solid var(--ink); }
.inv .rm-head .rm-badge { background: var(--gold); }
.inv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.18fr; gap: .6rem; }
.inv-kid { position: relative; border-radius: 1.2rem; background: radial-gradient(ellipse 60% 22% at 50% 92%, #CFC6B6 0 98%, transparent), linear-gradient(#182A52, #24396B 60%, #2F4680); border: 2.5px solid var(--ink); overflow: hidden; }
.inv-kid::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 98%, transparent), radial-gradient(1.5px 1.5px at 30% 9%, #fff 98%, transparent), radial-gradient(1px 1px at 72% 14%, #fff 98%, transparent), radial-gradient(1.5px 1.5px at 88% 30%, #fff 98%, transparent), radial-gradient(1px 1px at 55% 24%, #fff 98%, transparent), radial-gradient(1px 1px at 8% 44%, #fff 98%, transparent); opacity: .8; }
.inv-cv { position: absolute; left: 22%; right: 22%; top: 3%; bottom: 2%; width: 56%; height: 95%; }
.gslot { position: absolute; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: var(--cream); border: 2.5px solid var(--ink); box-shadow: 0 .2rem 0 rgba(0, 0, 0, .45); display: grid; place-items: center; }
.gslot .ic { width: 2.2rem; height: 2.2rem; }
.gslot.empty { background: rgba(244, 235, 208, .55); border-style: dashed; }
.gslot .ghost { opacity: .35; filter: grayscale(1); }
.gslot.sel { background: var(--gold); transform: scale(1.08); }
.gslot .tier { position: absolute; right: -.35rem; top: -.35rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--blue); color: #fff; border: 2px solid var(--ink); font: 700 .8rem/1.05rem Fredoka, sans-serif; text-align: center; font-style: normal; }
.s-head { left: 5%; top: 6%; } .s-back { left: 3%; top: 38%; } .s-body { left: 5%; top: 70%; }
.s-hands { right: 5%; top: 6%; } .s-feet { right: 3%; top: 38%; } .s-vehicle { right: 5%; top: 70%; }
.inv-side { position: relative; min-height: 0; display: flex; flex-direction: column; }
.bag { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: .45rem; padding: .55rem .7rem .6rem; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 1.2rem; }
.bag-head { display: flex; align-items: center; gap: .45rem; font: 700 1.5rem Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
.bag-head .ic { width: 2.1rem; height: 2.1rem; }
.bag-n.full { color: var(--red); animation: throb .7s infinite; }
.bag-bar { flex: 1; height: .75rem; border-radius: .4rem; background: #D6CEC0; border: 2px solid var(--ink); overflow: hidden; }
.bag-bar i { display: block; height: 100%; background: var(--amber); }
.bag-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.res5, .bag-grid .res { position: relative; width: auto; height: auto; aspect-ratio: auto; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: .1rem; font: 700 1.6rem Fredoka, sans-serif; font-variant-numeric: tabular-nums; cursor: help; }
.bag-grid .disc, .items .disc { width: 3.9rem; height: 3.9rem; border-radius: 50%; background: var(--c, #EADFC8); border: 2.5px solid var(--ink); display: grid; place-items: center; }
.bag-grid .disc .ic { width: 2.7rem; height: 2.7rem; }
.bag-grid .none { opacity: .45; }
.bag-grid .rare { position: absolute; right: .1rem; top: -.2rem; }
.bag-grid .rare .ic { width: 1.05rem; height: 1.05rem; }
.items { display: flex; align-items: center; gap: .55rem; padding-top: .35rem; border-top: 2px dashed rgba(26, 26, 26, .25); }
.item { display: flex; align-items: center; gap: .35rem; height: 3.6rem; padding: 0 .9rem 0 .25rem; border-radius: 1.8rem; background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 .2rem 0 rgba(0, 0, 0, .4); font: 700 1.55rem Fredoka, sans-serif; }
.item .disc { width: 3rem; height: 3rem; background: #DDF4FF; border-width: 2px; }
.item .disc .ic { width: 2.1rem; height: 2.1rem; }
.item.none { opacity: .5; box-shadow: none; }
.item:active:not(.none) { transform: translateY(.12rem); box-shadow: none; }
.items-q { margin-left: auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--blue); color: #fff; border: 2px solid var(--ink); display: grid; place-items: center; font: 700 1rem Fredoka, sans-serif; cursor: help; }
.tiers { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: .5rem .6rem .5rem 3.4rem; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 1.2rem; }
.tiers-x { position: absolute; left: .5rem; top: .5rem; width: 2.4rem; height: 2.4rem; }
.tiers-x .ic { width: 1.6rem; height: 1.6rem; }
.tier-row { display: flex; align-items: center; gap: .45rem; }
.tier-c { position: relative; width: 4.2rem; height: 4.2rem; border-radius: 1rem; background: #fff; border: 2.5px solid var(--ink); display: grid; place-items: center; flex: none; }
.tier-c > .ic { width: 2.8rem; height: 2.8rem; }
.tier-c.worn { background: var(--gold); }
.tier-c .tick { position: absolute; right: -.35rem; bottom: -.35rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; border: 2px solid var(--ink); display: grid; place-items: center; }
.tier-c .tick .ic { width: .95rem; height: .95rem; }
.tier-c.next { width: auto; min-width: 4.2rem; display: flex; gap: .3rem; padding: 0 .45rem; border-style: dashed; background: rgba(255, 255, 255, .7); cursor: help; }
.tier-c.next > .ic { width: 2.5rem; height: 2.5rem; opacity: .6; }
.tier-c .from { width: 2.2rem; height: 2.2rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); background: var(--cream); }
.tier-c .from img { width: 100%; height: 100%; object-fit: cover; transform: scale(.84); }
.tier-c .cost { display: flex; flex-direction: column; gap: .15rem; }
.tier-c .cost .pillc { height: 1.45rem; font-size: .85rem; }
.tier-c .cost .pillc .ic { width: 1rem; height: 1rem; }
.tier-c.locked > .ic { opacity: .25; filter: grayscale(1); }
.tier-c .lk { position: absolute; right: .3rem; bottom: .3rem; width: 1.2rem; height: 1.2rem; }
.tier-c .lk .ic { width: 1.2rem; height: 1.2rem; }
.inv-stats { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.stat { display: flex; align-items: center; gap: .3rem; height: 2.4rem; padding: 0 .55rem 0 .25rem; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 1.2rem; cursor: help; }
.stat .ic { width: 1.8rem; height: 1.8rem; }
.spips { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem; }
.spips i { height: .85rem; border-radius: .3rem; background: #D6CEC0; border: 2px solid var(--ink); }
.spips i.on { background: var(--green); }
.spips i.boost { background: var(--gold); animation: throb .7s infinite; }
/* the "?" on each stat and on the bag: they are icons only, so the kid can see there is more to read */
.stat .sq, .bag-head .sq { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--blue); color: #fff; border: 2px solid var(--ink); display: grid; place-items: center; font: 700 .8rem Fredoka, sans-serif; }
.bag-head .sq { width: 1.6rem; height: 1.6rem; font-size: 1rem; }

/* HUD: the backpack button, and pick-ups flying into it */
#btn-bag { position: relative; }
#btn-bag .ic { width: 1.5rem; height: 1.5rem; }
#btn-bag .bagn { position: absolute; left: 50%; bottom: -.55rem; transform: translateX(-50%); min-width: 1.9rem; height: 1rem; padding: 0 .2rem; border-radius: .5rem; background: var(--cream); border: 1.5px solid var(--ink); font: 700 .66rem/.8rem Fredoka, sans-serif; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
#btn-bag.full { animation: throb .5s 3; background: #ffc2b8; }
#btn-bag.full .bagn { background: #ffc2b8; }
#btn-bag.gain { animation: gain .25s; }
@keyframes gain { 50% { transform: scale(1.18); } }

@media (orientation: portrait) {
  .inv-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .inv-stats { grid-template-columns: repeat(3, 1fr); }
}


/* top-bar slots: a reward to earn shows its picture where a locked building shows the padlock */
.slock.srw { width: 1.35rem; height: 1.35rem; left: 1.4rem; bottom: -.35rem; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--ink); display: grid; place-items: center; }
.slock.srw .ic { width: 1.05rem; height: 1.05rem; }
.slock.srw.ready { background: var(--gold); animation: throb .8s infinite; }
#basebar .chip .need .ic { width: 1.1rem; height: 1.1rem; }

/* base map: an open building's next reward */
.mchip.rwchip { padding: 0 .15rem; background: var(--gold); }
.mchip.rwchip .ic { width: 1.2rem; height: 1.2rem; margin: 0; }

/* Care: the kid's bars, each with the badge of the building that refills it (HUD and character screen) */
#g-energy.tired { animation: throb .7s infinite; background: #ffc2b8; }
.gauge .gb { width: 1.25rem; height: 1.25rem; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--ink); background: var(--cream); flex: none; margin-left: .1rem; }
.gauge .gb img { width: 100%; height: 100%; object-fit: cover; transform: scale(.84); display: block; }
.bag .kbars { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.inv-locker { position: absolute; right: 9%; bottom: 14%; height: 72%; width: auto; pointer-events: none; }
.inv-kid.room .inv-cv { z-index: 1; }
.kbar { display: flex; align-items: center; gap: .25rem; height: 1.45rem; padding: 0 .25rem; background: rgba(244, 235, 208, .95); border: 2px solid var(--ink); border-radius: .75rem; cursor: help; }
.kbar .ic { width: 1.1rem; height: 1.1rem; }
.kbar .kb { flex: 1; height: .55rem; border-radius: .3rem; background: #D6CEC0; border: 1.5px solid var(--ink); overflow: hidden; }
.kbar .kb i { display: block; height: 100%; background: var(--green); }
.kbar.k-energy .kb i { background: var(--red); } .kbar.k-laser .kb i { background: var(--power); } .kbar.k-air .kb i { background: var(--ls); }
.kbar img { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--ink); object-fit: cover; }
#basebar .chip .need.bad { background: #ffc2b8; }

/* walkable rooms (src/room.js): the kid's bars, the exit, the station's chips */
#roomui { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
#roomui > * { pointer-events: auto; position: absolute; }
#roomui .rbars { left: calc(.6rem + env(safe-area-inset-left)); top: .5rem; width: 9.5rem; display: flex; flex-direction: column; gap: .25rem; }
#roomui .rm-x { right: calc(.6rem + env(safe-area-inset-right)); top: .5rem; width: 2.6rem; height: 2.6rem; }
#roomui .rm-x .ic { width: 1.4rem; height: 1.4rem; }
#roomui .roombar { left: 50%; bottom: .6rem; transform: translateX(-50%); display: flex; gap: .4rem; align-items: center; }
#roomui .roombar:empty { display: none; }
/* a base meter for a moment at the top of a room (rooms hide the HUD): the greenhouse's harvest fills Food (room.js meterPop) */
#roomui .rm-meter { position: absolute; top: .5rem; left: 50%; transform: translate(-50%, -.5rem); display: flex; align-items: center; gap: .35rem; height: 2.5rem; padding: 0 .8rem 0 .35rem;
  background: var(--cream, #F4EBD0); border: 2.5px solid var(--ink, #1A1A1A); border-radius: 1.3rem; box-shadow: 0 .2rem 0 rgba(0,0,0,.45); font: 700 1.05rem Fredoka, sans-serif; opacity: 0; transition: opacity .25s, transform .25s; }
#roomui .rm-meter.on { opacity: 1; transform: translate(-50%, 0); }
#roomui .rm-meter .ic { width: 1.9rem; height: 1.9rem; }
#roomui .rm-meter .kb { width: 7.5rem; height: 1.05rem; border: 2.5px solid var(--ink, #1A1A1A); border-radius: .6rem; background: #fff; overflow: hidden; }
#roomui .rm-meter .kb i { display: block; height: 100%; background: var(--c); }
#roomui .rm-meter .mn { min-width: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
#roomui .chip .need { display: flex; align-items: center; gap: .1rem; font-size: .9rem; padding: 0 .3rem; border-radius: .6rem; background: #fff; border: 1.5px solid var(--ink); }
#roomui .chip .need .ic { width: 1.1rem; height: 1.1rem; }
#roomui .chip .need.ok { background: #bfe8c4; } #roomui .chip .need.bad { background: #ffc2b8; }
#roomui .chip .cost { display: flex; align-items: center; font-size: .85rem; } #roomui .chip .cost .ic { width: 1rem; height: 1rem; }

/* the character screen's cozy look: the bunk room behind the kid (when the room art is synced) */
.inv-kid.room { background-size: cover; background-position: 55% 40%; }
.inv-kid.room::before { display: none; }

/* The storm room (src/stormroom.js): the storm bar, the dose and the walls (the kid's berm) at the top, the stations'
   meters over them, a worried crewmate, the way out (the brave dash). */
#stormui { position: absolute; inset: 0; z-index: 31; pointer-events: none; font-family: Fredoka, sans-serif; }
#stormui::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(255,140,40,0) 52%, rgba(242,110,30,.3) 100%); transition: opacity 1.2s; }
#stormui .st-top { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; align-items: center; pointer-events: auto; }
#stormui .st-pill { display: flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .75rem 0 .35rem; background: var(--cream, #F4EBD0); border: 2.5px solid var(--ink, #1A1A1A); border-radius: 1.3rem; box-shadow: 0 .2rem 0 rgba(0,0,0,.45); }
#stormui .st-pill .ic { width: 1.9rem; height: 1.9rem; }
#stormui .st-pill b { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
#stormui .st-storm { background: #FFE0B8; }
#stormui .st-bar { width: 8.5rem; height: 1rem; border: 2.5px solid var(--ink, #1A1A1A); border-radius: .6rem; background: #fff; overflow: hidden; }
#stormui .st-bar i { display: block; height: 100%; transition: width .2s linear; }
#stormui .st-storm .st-bar i { background: linear-gradient(90deg, #F28B30, #F7B35B); }
#stormui .st-dose .st-bar { width: 6.5rem; }
#stormui .st-dose .st-bar i { background: linear-gradient(90deg, #6CC56F, #F2C14E 60%, #F26D7D); }
#stormui .st-t { font: 700 1.1rem Fredoka, sans-serif; min-width: 2.4rem; text-align: right; }
#stormui .st-walls { background: #E6DCCB; padding-right: .7rem; }
#stormui .st-walls b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
/* the walls line (the room is inside the kid's berm): a few seconds after the kid comes in, then it fades */
#stormui .st-say { position: absolute; top: 3.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .4rem; width: max-content; max-width: 86vw; padding: .3rem .8rem .3rem .4rem;
  background: #fff; border: 2.5px solid var(--ink, #1A1A1A); border-radius: 1.2rem; box-shadow: 0 .2rem 0 rgba(0,0,0,.4); font: 600 1rem/1.2 Nunito, sans-serif; transition: opacity .6s; }
#stormui .st-say .ic { width: 1.8rem; height: 1.8rem; flex: none; }
#stormui .st-say.gone { opacity: 0; }
/* a station's meter: its icon and a fat bar, over its machine; the one to go to bounces with a "!" (playtest 14 Nov) */
#stormui .st-meter { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .3rem; height: 2.8rem; padding: 0 .55rem 0 .25rem;
  background: var(--cream, #F4EBD0); border: 2.5px solid var(--ink, #1A1A1A); border-radius: 1.5rem; box-shadow: 0 .2rem 0 rgba(0,0,0,.4); }
#stormui .st-meter .ic { width: 2.2rem; height: 2.2rem; }
#stormui .st-mb { width: 4.8rem; height: 1.15rem; border: 2.5px solid var(--ink, #1A1A1A); border-radius: .7rem; background: #fff; overflow: hidden; }
#stormui .st-mb i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--c); transition: width .15s linear, background .2s; }
#stormui .st-meter.urgent { border-color: #C93D52; background: #FFE3E3; animation: stbounce .45s ease-in-out infinite alternate; z-index: 1; }
#stormui .st-meter.urgent::after { content: '!'; position: absolute; right: -.6rem; top: -.65rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #F26D7D; border: 2.5px solid var(--ink, #1A1A1A); color: #fff; font: 700 1.05rem/1.35rem Fredoka, sans-serif; text-align: center; }
@keyframes stbounce { from { transform: translate(-50%, -50%) scale(1.06); } to { transform: translate(-50%, -62%) scale(1.14); } }
#stormui .st-worry { position: absolute; transform: translate(-50%, -100%); padding: .1rem .45rem; background: #fff; border: 2.5px solid var(--ink, #1A1A1A); border-radius: .9rem; font: 700 1.2rem Fredoka, sans-serif; }
#stormui .st-worry[hidden] { display: none; }
#stormui .st-out { position: absolute; right: calc(.6rem + env(safe-area-inset-right)); top: .5rem; pointer-events: auto; display: flex; align-items: center; gap: .3rem; height: 2.5rem; padding: 0 .75rem 0 .35rem; border: 2.5px solid var(--ink, #1A1A1A); border-radius: 1.3rem; background: #FFDDAA; box-shadow: 0 .2rem 0 rgba(0,0,0,.45); font: 700 1rem Fredoka, sans-serif; color: var(--ink, #1A1A1A); cursor: pointer; }
#stormui .st-out .ic { width: 1.7rem; height: 1.7rem; }
/* the end card when the storm's end is the mission's end (stormroom.js passed()): the storm glow fades, the stars pop in */
#stormui.ending::before { opacity: 0; }
body:has(#stormui.ending) #roomui .roombar { display: none; } /* no station chip ("Calm") under the end card */
#stormui.ending .st-top, #stormui.ending .st-say, #stormui.ending .st-meter, #stormui.ending .st-worry, #stormui.ending .st-out { display: none; }
#stormui .st-end { position: absolute; left: 50%; top: 29%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; width: max-content; max-width: 88vw;
  padding: .5rem 1.5rem .7rem; background: var(--cream, #F4EBD0); border: 3px solid var(--ink, #1A1A1A); border-radius: 1.4rem; box-shadow: 0 .3rem 0 rgba(0,0,0,.45); animation: stpop .4s cubic-bezier(.3,1.6,.6,1) both; }
#stormui .st-end > .ic { width: 2.2rem; height: 2.2rem; }
#stormui .st-end b { font: 700 1.5rem Fredoka, sans-serif; }
#stormui .st-stars { display: flex; gap: .35rem; font-size: 2.5rem; line-height: 1; }
#stormui .st-stars i { font-style: normal; color: #D6CEC0; -webkit-text-stroke: 2px var(--ink, #1A1A1A); animation: ststar .45s cubic-bezier(.3,1.8,.6,1) var(--d) both; }
#stormui .st-stars i.on { color: #F26D7D; } /* hearts for the shelter's care: gold stars are the mission's grade */
#stormui .st-care { font: 800 .8rem Nunito, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
#stormui .st-saved { display: flex; align-items: center; gap: .35rem; font: 700 1.05rem Nunito, sans-serif; color: #1f4fa8; }
#stormui .st-saved .ic { width: 1.7rem; height: 1.7rem; }
@keyframes stpop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
@keyframes ststar { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
#roomui:has(~ #stormui) .rm-x, body:has(#stormui) #roomui .rm-x { display: none; }
#roomui .chip[data-hold] { touch-action: none; user-select: none; -webkit-user-select: none; }
#roomui .chip.held { transform: translateY(.12rem); box-shadow: 0 0 0 .3rem rgba(242,193,78,.65); background: var(--gold, #F2C14E); animation: none; }

/* A reward's toast with one real fact under it (play.js rewardToast, playtest C4): two lines, up long enough to read. */
.toast.fact { flex-wrap: wrap; justify-content: center; max-width: min(32rem, 88vw); animation-duration: 4.9s; }
.toast.fact small { flex-basis: 100%; text-align: center; font: 600 .82rem/1.25 Nunito, sans-serif; color: #1f4fa8; }