/* ================= the residents' errands and the blue tokens (13 Oct evening): js/client/59-errands-ui.js =================
   One colour for the whole system: the blue of a blue card (RANKS[2], --t3), over the game's warm dark panels */
:root{--er:#4aa3ff;--er2:#9fd2ff;--erBg:#0e1626;--erLn:#2f5f92}
.erDia{font-style:normal;color:var(--er);text-shadow:0 0 6px #4aa3ffaa,1px 1px 0 #000}
/* the block in a talk with a resident */
.erBox{position:relative;margin:9px 0 3px;padding:8px 10px 9px;border:1px solid var(--erLn);background:linear-gradient(180deg,#14223a,var(--erBg) 55%,#120d0a);
  box-shadow:inset 0 0 0 1px #00000080,0 0 14px #4aa3ff22}
.erBox .erHd{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex-wrap:wrap}
.erBox .erHd>b{font:600 14px var(--f-display);color:var(--er2);letter-spacing:.03em}
.erBox .erHd span{margin-left:auto;font:600 11.5px var(--f-ui);color:#8fb4dc}
.erBox .erHd span b{font:700 11.5px var(--f-ui);color:#fff}
.erBox .erTi{display:block;font:600 13.5px var(--f-ui);color:#e8f2ff}
.erBox p{margin:3px 0 5px;color:var(--ink);font-size:13px;line-height:1.42;font-style:italic}
.erBox .erGoal{font:600 12.5px var(--f-ui);color:var(--er2)}
.erBox .erGoal b{color:#fff}
.erBox .erRw{margin-top:4px;font:500 12px var(--f-ui);color:var(--dim)}
.erRw .erT{color:var(--er2)}.erRw .g{color:var(--gold)}.erRw .x{color:var(--xp)}
.erNote{margin-top:4px;font:500 11.5px/1.35 var(--f-ui);color:#8fb4dc}
.erNote.bad{color:var(--bad)}
.erBtns{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:7px}
.erOk{font:700 12.5px var(--f-ui);color:var(--good)}
.erBtns .erArm{color:var(--bad)}
.erBox .erMsg{margin:4px 0 0;color:#cfe2f8;font-style:normal}
.erBar{position:relative;height:6px;margin:5px 0 4px;background:#0a1220;border:1px solid #1f3d63;overflow:hidden}
.erBar>i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#2f78cc,#7fc4ff);box-shadow:0 0 6px #4aa3ff}
.erBar.big{height:16px;margin:2px 0}
.erBar.big>span{position:absolute;inset:0;display:grid;place-items:center;font:700 11px/1 var(--f-ui);color:#fff;text-shadow:1px 1px 0 #000}
/* the city window: a blue diamond on the card, a blue glow, the day's count */
.ccard.erq{border-color:#3f7fc0;box-shadow:inset 0 0 0 1px #4aa3ff40,0 0 14px #4aa3ff33}
.ccard.q.erq{box-shadow:inset 0 0 0 1px #ffd24a2e,0 0 14px #ffb02e33,0 0 0 1px #4aa3ff66}
.ccard .erm{position:absolute;right:6px;bottom:4px;font:800 14px/1 var(--f-ui);font-style:normal;color:var(--er);text-shadow:1px 1px 0 #000,0 0 8px #4aa3ff}
.ccard .erm.r{color:#cfeaff;text-shadow:1px 1px 0 #000,0 0 8px #4aa3ff,0 0 3px #fff}
.ccard .erm.a{color:#5f84ad;text-shadow:1px 1px 0 #000}
@media (prefers-reduced-motion:no-preference){.ccard.erq .erm{animation:erBob 1.6s ease-in-out infinite}}
@keyframes erBob{50%{transform:translateY(-2px)}}
.erTop{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:3px 9px;font:600 12px var(--f-ui);color:#bcd6f2;background:var(--erBg);border:1px solid var(--erLn)}
.erTop i{font-style:normal;color:var(--er)}
.erTop b{color:#fff}
/* the quest panel and the Journal */
#quests .erH5{color:var(--er2)}
#quests .q.erq>b{color:#d8ebff}
#quests .lore.erTk{font-style:normal;color:#8fb4dc}
#quests .lore.erTk b{color:#fff}
.jh.erJh{color:var(--er2)}
.jh.erJh .erDia{width:24px;text-align:center;font-size:18px}
.jq.erJq{border-color:#2b4d74;background:linear-gradient(180deg,#141d2c,#0e1018)}
.jq.erJq .jbar>i{background:linear-gradient(90deg,#2f78cc,#7fc4ff)}
/* the bag: the tokens' card and the craft */
#bag .erBag{width:100%;display:flex;flex-direction:column;gap:5px}
#bag .erBag small{font-size:11px;line-height:1.35;color:#8f9db0}
#bag .erPick{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
#bag .erPick span{font:600 11.5px var(--f-ui);color:var(--er2);margin-right:2px}
.erCraft{color:#cfe6ff}
/* the Craft tab of the companions */
.cscr .erComp{margin-top:10px;border-color:#2b4d74}
.cscr .erComp .h{color:var(--er2)}
.cscr .erComp .erCraft{width:100%;margin-top:6px;color:#cfe6ff}
/* the reveal of a crafted card */
#erRv{position:absolute;inset:0;z-index:61;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 44%,#10243ee6,#05070cf2 70%);animation:erFade .25s ease-out}
#erRv .erRvBox{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:100%}
#erRv .erRvTok{font:700 18px var(--f-display);color:var(--er2);text-shadow:0 0 10px #4aa3ff,1px 1px 0 #000;animation:erTok 1.2s ease-out both}
#erRv .erRvCard{position:relative;width:132px;height:176px;perspective:700px;animation:erDrop .5s cubic-bezier(.2,1.4,.4,1) both}
#erRv .erRvCard::before{content:"";position:absolute;inset:-46px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 50%,transparent),transparent 66%);opacity:0;animation:erGlow 1.8s 1.25s ease-in-out infinite alternate;pointer-events:none}
#erRv.low .erRvCard::before{display:none}
#erRv .erRvShk{position:absolute;inset:0;animation:erShake .4s .55s linear both}
#erRv .erRvIn{position:absolute;inset:0;transform-style:preserve-3d;animation:erFlip .5s .95s ease-in-out both}
#erRv .erRvBack,#erRv .erRvFace{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#erRv .erRvBack{background:#1a120c url(../assets/img/packs.png) -550px 0/704px 176px no-repeat;image-rendering:pixelated;box-shadow:0 0 18px #4aa3ff66}
#erRv .erRvFace{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 35%,#120c08),#120c08 72%);border:3px solid var(--c);box-shadow:0 0 26px var(--c)}
#erRv .erRvFace canvas{width:100px;height:100px;margin:6px 0 auto;image-rendering:pixelated}
#erRv .erRvFace b{font:700 13px/1.15 var(--f-ui);color:var(--c)}
#erRv .erRvFace small{font:600 11px var(--f-ui);color:#d8c8a8}
#erRv h3{margin:8px 0 0;font:700 26px var(--f-display);color:var(--c);text-shadow:0 0 12px var(--c),2px 2px 0 #000;animation:erIn .4s 1.35s both}
#erRv p{margin:0;color:var(--ink);font-size:14px;animation:erIn .4s 1.45s both}
#erRv .erRvBtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px;animation:erIn .4s 1.55s both}
#erRv .erRvBtns .btn{font:600 14px var(--f-ui);padding:4px 16px}
#erRv.calm *,#erRv.calm{animation:none!important}
#erRv.calm .erRvIn{transform:rotateY(180deg)}
#erRv.calm .erRvCard::before{opacity:.6}
@keyframes erFade{from{opacity:0}}
@keyframes erTok{0%{opacity:0;transform:translateY(12px)}25%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-26px)}}
@keyframes erDrop{from{opacity:0;transform:translateY(-70px) scale(.55)}to{opacity:1;transform:none}}
@keyframes erShake{0%,100%{transform:none}20%{transform:translateX(-5px) rotate(-2deg)}40%{transform:translateX(5px) rotate(2deg)}60%{transform:translateX(-3px) rotate(-1deg)}80%{transform:translateX(3px) rotate(1deg)}}
@keyframes erFlip{to{transform:rotateY(180deg)}}
@keyframes erGlow{from{opacity:.35;transform:scale(.92)}to{opacity:.85;transform:scale(1.06)}}
@keyframes erIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#erRv,#erRv *{animation:none!important}#erRv .erRvIn{transform:rotateY(180deg)}#erRv .erRvCard::before{opacity:.6}}
@media (max-width:600px){#erRv .erRvCard{width:110px;height:147px}#erRv .erRvBack{background-position:-458px 0;background-size:587px 147px}#erRv .erRvFace canvas{width:80px;height:80px}#erRv h3{font-size:22px}
  .erBox .erHd span{margin-left:0;width:100%}}